webpack几个插件的安装使用

创建项目

1.新建一个空白目录，打开cmd,并运行“npm init -y”，初始化包管理配置文件；
2.创建src源代码目录；
3.用VScode软件进行后续操作比较方便；
4.在src目录下面创建“index.html”和“index.js”文件；
5.运行“npm install jquery -S”（注意是“jquery”不是“jQuery”）命令安装jQuery；
6.通过ES6模块化的方式导入，实现列表变色效果

安装webpack

安装webpack和webpack-cli

npm install webpack -S
npm install  webpack-cli -D
1
2

安装完成之后package.json文件中的“devDependencies”中就会有对应的安装包版本提示，表明安装成功了

安装webpack-dev-server

npm install webpack-dev-server -D
1

安装完成之后需要在“scripts”中将“webpack”更改成“webpack serve” ，更改完成之后，只需要保存之后界面就会总动刷新，不需要每次更改代码之后重复运行

安装html-webpack-plugin

npm install html-webpack-plugin -D
1

安装完成之后需要配置，

按照框中用红框表示的进行配置即可

//1. 导入HTML插件，需要构造一个函数
const HtmlPlugin = require ('html-webpack-plugin')
// 2. 创建HTML插件的实例化对象
const htmlPlugin =new HtmlPlugin ({
    template:'./src/index.html',   //指定原文件路径
    filename: './index.html'   //指定生成文件的路径
})
//3. tongguo plugins节点，使htmlPlugin插件生效
 plugins: [htmlPlugin],   
1
2
3
4
5
6
7
8
9

最后，可以通过配置端口，ip地址，访问固定ip

    // 监听文件改动，自动打包
    devServer: {
        contentBase:path.join(__dirname,'./'),
        compress: true,
        port: 8080,
        open: 'Chrome',
        host: '127.0.0.1'
    },
1
2
3
4
5
6
7
8