webpack+vue · 筆記

[TOC] ### 生成`package.json` ``` npm init -y ``` ### 安裝`webpack` ``` yarn add --dev webpack yarn add --dev webpack-cli ``` ### 新建`src/main.js`入口文件 ### 新建`webpack.config.js`文件 ``` module.exports = { mode:'production', entry: __dirname + "/src/main.js",//唯一入口文件 output: {//輸出目錄 path: __dirname + '/dist',//打包后的js文件存放的地方 filename: 'js/[name].[hash].js',//打包后輸出的js的文件名 // publicPath:'' } } ``` ### 配置構建命令 ``` "build": "webpack --config webpack.config.js --progress --colors" ``` ### 配置index.html路徑 **新建`public/index.html`文件** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue</title> </head> <body> <noscript> <strong>We're sorry but doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div>  </body> </html> ``` **安裝插件`html-webpack-plugin`**[文檔](https://github.com/jantimon/html-webpack-plugin#configuration) ``` yarn add --dev html-webpack-plugin ``` **配置** ``` const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ... plugins: [ new HtmlWebpackPlugin({ template: 'public/index.html', favicon:'public/favicon.ico', filename: 'index.html', title: 'My App' }) ] } ``` ### 清理`/dist`文件夾 **安裝插件`clean-webpack-plugin`** ``` yarn add --dev clean-webpack-plugin ``` **配置** ``` const { CleanWebpackPlugin } = require("clean-webpack-plugin"); module.exports = { ... plugins: [ ... new CleanWebpackPlugin(), new HtmlWebpackPlugin({ ... }) ] } ``` ### 實時重新加載，安裝`webpack-dev-server` ``` yarn add webpack-dev-server --dev ``` 告知`webpack-dev-server`，在`localhost:8080`下建立服務，將`dist`目錄下的文件，作為可訪問文件。 ``` devServer: { contentBase: './dist' }, ``` **配置啟動腳本** ``` "scripts": { ... "start": "webpack-dev-server --open", ... }, ``` ### 處理css文件和style標簽 **安裝`css-loader`** ``` yarn add css-loader --dev ``` **安裝`mini-css-extract-plugin`** ``` yarn add mini-css-extract-plugin --dev ``` ### 安裝`vue` ``` yarn add vue ``` 安裝`vue-loader`，用來轉換vue單文件 ``` yarn add vue-loader --dev ``` vue單文件中分為三個部分,其中`template`部分需要專用的插件進行轉換，安裝`vue-template-compiler`: ``` yarn add vue-template-compiler --dev ``` **配置** ``` const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { ... module: { rules: [ { test: /\.vue$/, use: ['vue-loader'] }, { test: /\.css$/, use: [ { loader:MiniCssExtractPlugin.loader , options: { //需要設置publicPath，不然css背景圖片會路徑不對 publicPath: '../' } }, 'css-loader' ] } ] }, plugins:[ ... new VueLoaderPlugin(), new MiniCssExtractPlugin({ filename: 'css/[name].css', chunkFilename: '[id].css', }) ... ] } ``` **修改`main.js`文件** ``` import Vue from 'vue' import App from './App.vue' new Vue({ render: h => h(App) }).$mount('#app') ``` **新建`src/app.vue`文件** ``` <template> <div class="main" style="color:red;"> <div>{{vue}}</div> </div> </template> <script> export default { data() { return { vue: "vue" }; } }; </script> <style> .main{ font-size: 30px; } </style> ``` ### 處理圖片和字體文件 **安裝`file-loader`和`url-loader`** ``` yarn add file-loader --dev yarn add url-loader --dev ``` **配置** ``` module:{ rules:[ ... { test: /\.(png|svg|jpg|gif)$/, use: { loader: 'url-loader', options: { name:'images/[name].[ext]', limit:2048, esModule: false } } }, { test: /\.(woff|svg|eot|ttf)\??.*$/, use:{ loader: 'url-loader', options: { name:'fonts/[name].[ext]', limit:2048 } } } ] } ``` ### 最終生成的`webpack.config.js` ``` const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { mode:'production', entry: __dirname + "/src/main.js",//唯一入口文件 output: {//輸出目錄 path: __dirname + '/dist',//打包后的js文件存放的地方 filename: 'js/[name].[hash].js',//打包后輸出的js的文件名 // publicPath:'' }, devServer: { contentBase: './dist' }, module: { rules: [ { test: /\.vue$/, use: ['vue-loader'] }, { test: /\.css$/, use: [ { loader:MiniCssExtractPlugin.loader, options: { //需要設置publicPath，不然css背景圖片會路徑不對 publicPath: '../' } }, 'css-loader' ] }, { test: /\.(png|svg|jpg|gif)$/, use: { loader: 'url-loader', options: { name:'images/[name].[ext]', limit:2048, esModule: false } } } ] }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: 'public/index.html', filename: 'index.html', title: 'My App' }), new VueLoaderPlugin(), new MiniCssExtractPlugin({ filename: 'css/[name].css', chunkFilename: '[id].css', }) ] }