webpack.config.js配置文件

zhgc

Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。
默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，
返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件。

1.新建一个文件夹src存放打包前的源文件，dist文件夹存放打包后的文件，
新建一个webpack.config.js为webpack的配置文件



打包前的文件夹中的内容



2.新建一个index1.html引用dist下打包后的js

3.输入命令：webpack，即可按照webpack.config.js中的配置项进行编译



4.编译完的文件目录和内容如下



5.如果将webpack.config.js重命名为webpack.dev.config.js，
则直接执行默认的webpack命令则会找不到相应的配置文件，
需要借助于webpack的--config选项来指定配置文件

命令：webpack --config webpack.dev.config.js




6.如果要查看编译的进度，打包的模块之类的，
可以在package.json中的scripts标签内通过webpack的属性值来指定



7.输入命令：npm run webpack，来编译打包




webpack.config.js中entry值的详细介绍：

entry的值可以是一个string类型的字符串，也可以是一个数组，还可以是一个json对象

数组：这种情况会将entry定义的数组中的文件内容打包到output中定义的这一个文件



json对象：这种情况适应于多页面时的编译



使用命令：npm run webpack，编译打包将会看到在dist/js下生成两个文件

zhgc

个人webpack.config.js模板

1. const path = require('path');
   
2. const MiniCssExtractPlugin = require("mini-css-extract-plugin");        //提取成单个css文件
   
3. const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');      //压缩css插件
   
4. const HtmlWebpackPlugin = require('html-webpack-plugin');       //html文件打包，压缩
   
5. const CleanWebpackPlugin = require("clean-webpack-plugin");     //删除原来的打包文件
   
6. const copyWebpackPlugin = require("copy-webpack-plugin");     //复制静态文件
   
7. 
   
8. module.exports = {
   
9.     mode: 'development',
   
10.     entry: {        //入口文件
    
11.         index: './src/js/index.js',
    
12.     },
    
13.     output: {       //出口文件
    
14.         publicPath: '',     //模板、样式、脚本、图片等资源的路径中统一会加上额外的路径
    
15.         path: path.resolve(__dirname, 'dist'),
    
16.         filename: './js/[name].[hash:8].js'
    
17.     },
    
18.     module: {
    
19.         rules: [
    
20.             {
    
21.                 test: /\.html$/,
    
22.                 use: {
    
23.                     loader: 'html-loader',
    
24.                     options: {
    
25. 
    
26.                     }
    
27.                 }
    
28.             },
    
29.             {
    
30.                 test: /\.js$/,
    
31.                 // exclude: /node_modules/,
    
32.                 exclude: path.resolve(__dirname, 'node_modules'), //编译时，不需要编译哪些文件
    
33.                 //include: path.resolve(__dirname, 'src'),//在config中查看 编译时，需要包含哪些文件
    
34.                 loader: 'babel-loader',
    
35.                 query: {
    
36.                     presets: ['latest'] //按照最新的ES6语法规则去转换
    
37.                 }
    
38.             },
    
39.             {
    
40.                 test: /\.css$/,
    
41.                 use: [
    
42.                     // {loader: "style-loader"},        //在页面内嵌入css
    
43.                     {
    
44.                         loader: MiniCssExtractPlugin.loader,
    
45.                         options: {
    
46.                             // 这里可以指定一个 publicPath
    
47.                             // 默认使用 webpackOptions.output中的publicPath
    
48.                             publicPath: '../'
    
49.                         }
    
50.                     },      //单独抽离css
    
51.                     {loader: "css-loader"},
    
52.                     {       //自动添加前缀
    
53.                         loader: "postcss-loader",
    
54.                         options: {
    
55.                             plugins: [
    
56.                                 require("autoprefixer")
    
57.                             ]
    
58.                         }
    
59.                     }
    
60.                 ]
    
61.             },
    
62.             {
    
63.                 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    
64.                 loader: 'url-loader',
    
65.                 options: {
    
66.                     limit: 100,
    
67.                     name: './img/[name].[hash:7].[ext]',
    
68.                 }
    
69.             },
    
70.         ]
    
71.     },
    
72.     plugins: [
    
73.         new CleanWebpackPlugin(),       //删除上次打包文件，默认目录'./dist'
    
74.         new copyWebpackPlugin([{        //静态资源输出,将src目录下的assets文件夹复制到dist目录下
    
75.             from: path.join(__dirname, "./src/assets"),
    
76.             to: path.join(__dirname, "./dist/assets"),
    
77.         }]),
    
78.         new MiniCssExtractPlugin({
    
79.             filename: "./css/[name].[hash:8].css"
    
80.         }),
    
81.         new OptimizeCssAssetsPlugin(),      //压缩css文件
    
82.         new HtmlWebpackPlugin({
    
83.             favicon: './src/img/favicon.ico',      //图标
    
84.             template: './src/index.html',      //指定要打包的html
    
85.             filename:'index.html',       //指定输出路径和文件名
    
86.             minify: {       //压缩
    
87.                 removeComments: true,       //移除HTML中的注释
    
88.                 collapseWhitespace:true,        //删除空白符与换行符
    
89.                 removeAttributeQuotes: true        //去除属性引用
    
90.             }
    
91.         }),
    
92.         // new HtmlWebpackPlugin(//打包第二个页面
    
93.         //     {
    
94.         //         template: './app/src/page/index2.html',
    
95.         //         filename:'./page/index2.html'
    
96.         //     }
    
97.         // )
    
98.     ]
    
99. };

复制代码