在使用webpack来管理项目

1.webpack的基本使用

①新建项目的空白目录，并在终端上运行 npm init -y 的命令，初始化包管理配置文件package.json

②新建src源代码目录（之后写的代码都要放在此目录中）

③在新建的src文件夹下面创建index.html 和index.js文件

④在index.html中写好基本的代码

⑤运行 npm install jquery -S的命令，用以安装jQuery

⑥通过ES6模块化的方式导入jQuery

2.安装webpack

在终端上安装webpack的两个包

npm install webpack@版本号 webpack-cli@版本号  -D

3.在项目中配置webpack

①在项目的根目录中创建一个webpack.config.js的webpack配置文件，并初始化配置，代码如下

module.exports = {
    //mode是用来指定构建的模式 可选值有development（开发环境）和production（生产环境）
    mode:'development'
}

②在package.json的scripts节点中，新增一个dev脚本，代码如下：

"scripts":{
    //script节点下的脚本可以通过npm run 来执行，eg: npm run dev
    "dev":"webpack"
}

③在终端中运行 npm run dev 命令之后，将启动webpack对项目进行打包

④在webpack.config.js配置文件中，通过entry节点指定打包入口，通过output节点指定打包的出口

//导入node.js中专门操作路径的模块
module.exports = {
    // entry:'指定处理什么文件'
    // 当着个index.js文件发生改变之后，在这里也会相应的改掉对应的文件名字这样才不会报错
    entry:path.join(__dirname,'./src/index.js'),
    // 指定生成的文件要存放到哪里
    output:{
        //存放的目录 
        path:path.join(__dirname,'dist'),
        // 生成的文件名
        filename:'bundle.js'
    },

4.webpack插件的使用

由于修改完代码之后，每次都要运行 npm run dev 对项目进行打包之后，在修改的代码中新的样式才会生效，这样比较麻烦，所以就用到了webpack-dev-server和html-webpack-plugin

①对于webpack-dev-server

​    安装： npm install webpack-dev-server@版本号 -D

​    配置：修改package.json中的scripts节点中的dev,代码如下

"scripts":{
    //script节点下的脚本可以通过npm run 来执行，eg: npm run dev
    "dev":"webpack serve"
}

使用：A.再次在终端运行npm run dev命令，对项目重新进行打包;B.在浏览器中访问http://localhost:8080地址，可以查看打包之后的效果（注意不是在原来的file协议中查看，而是在http协议中查看效果）

②对于html-webpack-plugin

因为在http://localhost:8080 该地址中访问到的文件不会直接打开index.html文件，需要用html-webpack-plugin这个插件来使访问这个地址就能直接打开文件看效果

安装： npm install html-webpack-plugin@版本号 -D

配置：在webpack.config.js文件中进行配置

//1导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
//2创建一个HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
    //指定源文件的存放路径
    template:'./src/index.html',
    //指定生成文件存放的路径
    filename:'./index.html'
})
module.exports = {
    //mode是用来指定构建的模式 可选值有development（开发环境）和production（生产环境）
    mode:'development',
    //3通过pluginsj节点，使htmlPlugin插件生效
    plugins:[htmlPlugin]
}

5.webpack.config.js的一些参数

最后关于安装webpack的两个包（webpack和webpack-cli）以及两个插件（webpack-dev-server和html-webpack-plugin）之后，关于在webpack.config.js文件中配置的参数代码如下：

const path = require('path')

// 导入
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
    template:'./src/index.html',
    filename:'./index.html'
})

module.exports = {
    mode:'development',
    // entry:'指定处理什么文件'
    // 当着个index.js文件发生改变之后，在这里也会相应的改掉对应的文件名字这样才不会报错
    entry:path.join(__dirname,'./src/index.js'),
    // 指定生成的文件要存放到哪里
    output:{
        //存放的目录 
        path:path.join(__dirname,'dist'),
        // 生成的文件名
        filename:'bundle.js'
    },

    // 插件的数组，将来webpack在运行时会加载运行这些插件
    plugins:[htmlPlugin]
}