[转] webpack 插件的作用

 

 我们需要先安装插件：

npm i webpack-dev-server -D

在视频教程里，老师输入了 

ul>li{这是第$个li}*9

得到了

    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
        <li>这是第9个li</li>
    </ul>

接着，安装 jquery 

npm i jquery -S

在 js 文件中引用 import 时，js 被报错，因此需要使用 webpack 来进行打包构建

npm i webpack webpack-cli -D

然后修改 package.json 文件：

  "scripts": {
    "dev": "webpack"
  },

 这时候如果运行 npm run dev ，会看到配置文件缺失的提示，所以我们创建一个配置文件 webpack.config.js

module.exports = {
    mode: 'development' //  development production
}

再运行 

npm run dev

这时候会自动在项目下创建一个 dist 的文件夹，并将 ./src/index.js 打包到 ../dist/main.js 

 

 所以我们需要修改 ./src/index.html 文件中的引用为：

<script src="../dist/main.js"></script>

到目前为止，已经完成了最基本的打包构建步骤，接下来我们自定义打包构建配置，并实现在文件保存时自动打包：

我们修改 webpack.config.js 文件中的打包入口文件和输出文件路径：

const path = require('path')

module.exports = {
    mode: 'development', //  development production
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    }
}

这表示它编译后的文件名不再是 main.js  而是 bundle.js

所以我们同步修改 index.html 中的引用为

<script src="../dist/bundle.js"></script>

再修改 index.js 文件，发现网站效果并没有实时变化，必须 npm run dev 进行打包构建才行

所以我们需要自动打包： webpack-dev-server

 npm i webpack-dev-server@3.11.0 -D 

这里试过高版本的 webpack-dev-server 反而不能正常运行。