搭建一个简单的webpack（二）

上一篇学习到webpack打包时运行的代码是npx webpack --mode=development，现在将mode=development配置到webpack.config.js文件中。

module.exports = {
    
    
    mode:'development',
    module: {
    
    
        rules: [
            //....
        ]
    }
}

1、mode配置项有两个选项：development和production

development：将 process.env.NODE_ENV 的值设置为 development，启用 NamedChunksPlugin 和 NamedModulesPlugin
production：将 process.env.NODE_ENV 的值设置为 production，启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin

这样我们就可以直接使用 npx webpack 进行编译就可以了。

2、安装 html-webpack-plugin 插件

npm install html-webpack-plugin -D

在webpack文件夹下新建一个 public 文件夹，并在其中新建一个 index.html 文件。
在这里插入图片描述
在webpack.config.js文件中先引入html-webpack-plugin，然后在plugin数组里配置html-webpack-plugin。

//引入html-webpack-plugin
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports = {
    
    
    //...
    plugins:[
        //plugins数组放所有的webpack插件
        new HtmlWebpackPlugin({
    
    
            template:'./public/index.html',
            //打包后的文件名
            filename:'index.html',
            minify:{
    
    
                //是否移除属性的双引号
                removeAttributeQuotes:false,
                //是否折叠空白
                collapseWhitespace:false
            },
            //hash默认是false
            // hash:true
        })
    ]
}

此时只需执行npx webpack就可以对webpack进行打包了。此时 dist 目录下新增了 index.html 文件自动插入了我们打包之后的 js 文件，避免每次打包时都人工去修改 html文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title>
</head>
<body>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

3、此外，html-webpack-plugin 的 config 还有很多妙用：即可以通过新建一个配置文件设置某一属性在dev和bulid状态时为 true 或 false 属性，再在index.html文件中进行if条件的设置，这样在打包时就可以根据打包指令npm run dev和npm run build对打包文件需要加载的script文件和css文件进行配置。
下面是配置文件的代码：

// public/config.js
module.exports = {
    
    
    dev: {
    
    
        template: {
    
    
            title: '范梦羽',
            header: false,
            footer: true
        }
    },
    build: {
    
    
        template: {
    
    
            title: 'fmy',
            header: true,
            footer: false
        }
    }
}

下面是html文件的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <% if(htmlWebpackPlugin.options.config.header) { %>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <% } %>
    <title><%= (htmlWebpackPlugin.options.config.title) %></title>
</head>

<body>
</body>
<% if(htmlWebpackPlugin.options.config.header) { %>
<script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript"></script>
<% } %>

</html>

修改webpack.config.js文件的代码：

//...
const isDev = process.env.NODE_ENV === 'development';
const config = require('./public/config')[isDev ? 'dev' : 'build'];
module.exports = {
    
    
  mode: isDev ? "development" : "production",
  plugins: [
//...
      config: config.template
    })
  ]
};

安装 cross-env，因为process.env 中默认并没有 NODE_ENV

npm install cross-env -D

在package.json文件下修改script，实现Windows和Mac的兼容。

{
    
    
    "scripts": {
    
    
        "dev": "cross-env NODE_ENV=development webpack",
        "build": "cross-env NODE_ENV=production webpack"
    }
}

运行npm run dev

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    
    <title>范梦羽</title>
</head>

<body>
<script type="text/javascript" src="main.js"></script></body>

<script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript"></script>

</html>

运行npm run build

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    
    <title>fmy</title>
</head>

<body>
<script type="text/javascript" src="main.js"></script></body>

</html>

4、安装webpack-dev-server

npm install webpack-dev-server -D

在package.json文件下修改script

  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "cross-env NODE_ENV=development webpack-dev-server",
    "build": "cross-env NODE_ENV=production webpack"
  },

在 webpack.config.js 中进行 webpack-dev-server 的配置

module.exports = {
    
    
//...
  devServer:{
    
    
      port:'8000',  //默认是8080
      quiet:false,  //默认是false
      inline:true,  //默认true，false的话开启iframe模式
      stats:'errors-only',  //终端仅打印error，当启用了quiet或者是noInfo时，此属性不起作用
      overlay:false,  //默认不启用，启用后当编译出错时，会在浏览器窗口全屏输出错误。
      clientLogLevel:'silent',  //日志等级
      compress:true    //是否启用gzip
  }
};

运行npm run dev之后
在这里插入图片描述

5、devtool配置

module.exports = {
    
    
//...
  devtool: 'cheap-module-eval-source-map' //开发环境下使用
};

devtool 中的一些设置，可以将编译后的代码映射回原始源代码。不同的值会明显影响到构建和重新构建的速度。具体可看开发工具(Devtool)

6、webpack 不能直接处理 css，需要借助 loader。如果是 .css，我们需要的 loader 通常有： style-loader、css-loader，考虑到兼容性问题，还需要 postcss-loader。如果是 less 或者是 sass 的话，还需要 less-loader 和 sass-loader。

style-loader 动态创建 style 标签，将 css 插入到 <head>标签中
css-loader 负责处理 @import 等语句
postcss-loader 和 autoprefixer 自动生成浏览器兼容性前缀。推荐大家在根目录下创建 .browserslistrc，将对应的规则写在此文件中，除了 autoprefixer 使用外，@babel/preset-env、stylelint、eslint-plugin-conmpat 等都可以共用。
less-loader 负责处理编译 .less 文件,将其转为 css

执行顺序为: less-loader —> postcss-loader —> css-loader —> style-loader

npm install style-loader less-loader css-loader postcss-loader autoprefixer less -D

修改 webpack.config.js 文件

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.(le|c)ss$/,
        use: [
          "style-loader",
          "css-loader",
          {
    
    
            loader: "postcss-loader",
            options: {
    
    
              plugins: function() {
    
    
                return [
                  require("autoprefixer")({
    
    
                    overrideBrowserslist: [">0.25%", "not dead"]
                  })
                ];
              }
            }
          },
          "less-loader"
        ],
        exclude: /node_modules/ //排除 node_modules 目录
      }
    ]
  },
  //....
};

详情可查看我搭建的webpackTest

搭建一个简单的webpack（二）

猜你喜欢