Webpack项目模板配置浅析

目录

webpack基本配置

相关loader研究

相关plugin研究

webpack-cli打包配置

---

1. webpack基本配置

   • 打包最简单的CSS文件

     const path = require('path');
     ​
     module.exports = {
         entry: './entry.js',
         output: {
             path: path.resolve(__dirname, 'dist'),
             filename: 'bundle.js'
         },
         module: {
             rules: [
                 {
                     test: /\.css$/,
                     use: [ 'style-loader', 'css-loader' ]
                 }
             ]
         },
         mode: 'development'
     };
     ​

     • __dirname的路径和CSS的路径相同

   • entry：输入文件

   • output：输出文件，只能放在同一个目录

   • resolve：引用路径替换，例如

         resolve: {
             alias: {
                 'vue$': 'vue/dist/vue.esm.js'
             },
             extensions: ['.js', '.vue', '.json', '.css', '.node']
         },

     即将import vue from 'vue'改为import vue from 'vue/dist/vue.esm.js'

   • target：运行环境，一般可以写'node'

2. 相关loader研究

3. 相关plugin研究

4. webpack-cli打包配置

   • vue-cli脚手架

   • electron-cli脚手架

     1. 安装

        vue init simulatedgreg/electron-vue

     2. 主进程配置

     3. 渲染进程配置

        • loader

          1. less

             {
                 test: /\.less$/,
                 use: ['vue-style-loader', 'css-loader', 'less-loader']
             },

              

          2. css

             {
                 test: /\.css$/,
                 use: ['vue-style-loader', 'css-loader']
             },

              

          3. html

             {
                 test: /\.html$/,
                 use: 'vue-html-loader'
             },

              

          4. js

             {
                 test: /\.js$/,
                     use: 'babel-loader',
                 exclude: /node_modules/
             },

              

          5. node

             {
                 test: /\.node$/,
                     use: 'node-loader'
             },

              

          6. vue

             {
                 test: /\.vue$/,
                 use: {
                     loader: 'vue-loader',
                     options: {
                         extractCSS: process.env.NODE_ENV === 'production',
                         loaders: {
                             sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
                             scss: 'vue-style-loader!css-loader!sass-loader',
                             less: 'vue-style-loader!css-loader!less-loader'
                         }
                     }
                 }
             },

              

          7. png|jpg|gif|svg

             {
                 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                 use: {
                     loader: 'url-loader',
                     query: {
                         limit: 10000,
                         name: 'imgs/[name]--[folder].[ext]'
                     }
                 }
             },

              

          8. mp4|mp3|wav

             {
                 test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                     loader: 'url-loader',
                 options: {
                 limit: 10000,
                     name: 'media/[name]--[folder].[ext]'
                 }
             },

              

          9. woff|ttf|otf

             {
                 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                 use: {
                 loader: 'url-loader',
                     query: {
                     limit: 10000,
                         name: 'fonts/[name]--[folder].[ext]'
                     }
                 }
             }

              

        • plugin

          1. VueLoaderPlugin

             • 使用Vue-loader时，必须要引入这个模块

             • const VueLoaderPlugin = require('vue-loader/lib/plugin')
               plugins: [
                   // make sure to include the plugin!
                   new VueLoaderPlugin()
                 ]

                

          2. MiniCssExtractPlugin

             • 将CSS文件单独抽离出来

          3. HtmlWebpackPlugin

             var htmlWebpackPlugin = require('html-webpack-plugin')
             ​
             const path = require('path')
             module.exports = {
                 entry: './src/script/main.js',
                 output: {
                     filename: 'js/bundle.js',
                     path: path.resolve(__dirname, 'dist')
                 },
                 plugins: [
                     new htmlWebpackPlugin({
                         filename: 'index.html',
                         template: 'index.html',
                         inject: 'head'
                     })
                 ]
             }

             • 用于动态生成HTML文件

             参数	简介	说明
             title	标题
             filename	文件名
             template	依赖于哪一个html文件
             inject	script标签的位置
             favicon	icon资源插入
             minify	文件最小化
             cache	内容变化时生成一个新文件
             showErrors	webpack报错时，会把错误信息包含在pre中
             chunks	多文件入口，用于引入哪些JS文件
             excludeChunks	排除掉哪些JS
             xhtml	兼容xhtml
             chunksSortMode	script排序方式

          4. HotModuleReplacementPlugin

          5. NoEmitOnErrorsPlus

          6. WebpackDevServer

             • 用来创建一个http服务器

             const path = require('path');
             const htmlWebpackPlugin = require('html-webpack-plugin')
             const VueLoaderPlugin = require('vue-loader/lib/plugin')
             module.exports = {
                 entry: {
                     main: './src/main.js'
                 },
                 output: {
                     path: path.resolve(__dirname, 'dist'),
                     filename: 'index.js',
                 },
                 module: {
                     rules: [
                         {
                             test: /\.css$/,
                             use: ['vue-style-loader', 'css-loader']
                         },
                         {
                             test: /\.js$/,
                             use: 'babel-loader',
                             exclude: /node_modules/
                         },
                         {
                             test: /\.vue$/,
                             use: {
                                 loader: 'vue-loader'
                             }
                         },
                     ]
                 },
                 plugins: [
                     new VueLoaderPlugin(),
                     new htmlWebpackPlugin({
                         filename: './index.html',
                         template: './src/index.html'
                     })
                 ],
                 mode: 'development',
                 resolve: {
                     alias: {
                         'vue$': 'vue/dist/vue.esm.js'
                     },
                     extensions: ['.js', '.vue', '.json', '.css', '.node']
                 },
                 devServer: {
                     port: 9080,
                     contentBase: './dist/test',
                     index: 'main.html'
                 }
             };

             ​

             需要安装的插件有：

             {
               "name": "unit10",
               "version": "1.0.0",
               "description": "",
               "main": "index.js",
               "scripts": {
                 "test": "echo \"Error: no test specified\" && exit 1",
                 "dev": "node dev-runner.js"
               },
               "author": "",
               "license": "ISC",
               "dependencies": {
                 "babel-core": "^6.26.3",
                 "babel-loader": "^7.1.5",
                 "css-loader": "^2.1.0",
                 "html-webpack-plugin": "^3.2.0",
                 "style-loader": "^0.23.1",
                 "vue": "^2.5.21",
                 "vue-loader": "^15.5.0",
                 "vue-style-loader": "^4.1.2",
                 "vue-template-compiler": "^2.5.21",
                 "webpack": "^4.28.3",
                 "webpack-cli": "^3.2.1",
                 "webpack-dev-server": "^3.1.14"
               }
             }

             ​

 

由于vue的配置完全依赖于webpack.config.js，而配置文件的entry和output这种批量生产模式无法为不同的应用区分文件夹（从html到js全部隔离），因此只能使用命令行的方式来打包。