深圳全飞鸿

标题: webpack.config.js配置文件 [打印本页]
作者: zhgc    时间: 2020-2-18 21:00
标题: webpack.config.js配置文件
本帖最后由 zhgc 于 2020-2-18 21:02 编辑

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    时间: 2020-2-18 21:07
个人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");     //复制静态文件

  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: {

  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. };
复制代码




欢迎光临 深圳全飞鸿 (http://www.nagomes.com/disc/) Powered by Discuz! X3.2