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', }) ] }