webpack简单的打包和使用（初级练习推荐）

第一步 全局安装

npm install webpack webpack-cli -g

第二步 查看webpack 和 webpack-cli 的 安装情况

webpack -v  查看

第三步 找一个项目的文件夹

第四步 运行npm init -y

 安装npm管理项目中的依赖包

第五步  本地安装

npm install --save-dev webpack   

安装webpack  上面虽然全局安装过了 但是 为了让npm 项目管理包记录  仍需要 这样安装一下

npm install --save-dev webpack-cli 

安装cli

第六步 创建 webpack.config.js 文件

由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径：

  // 导入处理路径的模块
    var path = require('path');

    // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
        // 多入口
  		// entry:['./src/js/index.js','./src/js/one.js'],
        //entry: {
            //ind: './src/js/index.js',
            //on: './src/js/one.js'
        //},
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        },
        // 多出口
        //output: {
         //   filename: 'js/webpack02.[name].js',
         //   path: path.resolve(__dirname, 'dist')
        //},
    }
#配置文件具有更多的灵活性。我们可以通过配置方式指定 loader 规则(loader rule)、plugin(插件)、resolve 选项，以及许多其他增强功能

#注意： (生产环境下) 默认情况下，仅剥离 /^\**!|@preserve|@license|@cc_on/i 正则表达式匹配的注释，其余注释会删除 注释将存储到 .LICENSE.txt

第七步 使用html-webpack-plugin插件配置启动页面

运行cnpm i html-webpack-plugin --save-dev安装到开发依赖

修改webpack.config.js配置文件如下：

 // 导入处理路径的模块
    var path = require('path');
    // 导入自动生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        },
        plugins:[ // 添加plugins节点配置插件
            new htmlWebpackPlugin({
            	title:'xx',//标题
                template:path.resolve(__dirname, 'src/index.html'),//模板路径
                filename:'demo.html'//自动生成的HTML文件的名称，
                #启动webpack-dev-server 以后，在服务器目录下，默认打开查找的是index.html,例如：http:127.0.0.1:1234  默认打开的是index.html 
                #但是 你修改了 生成的html的文件名，那么服务器打开的路径 也要对应的修改:http://127.0.0.1:1234/demo.html
                inject: false，//是否生成script,以及script位置
            })
        ]
    }

第八步 考虑到用 CLI 这种方式来运行本地的 webpack 副本并不是特别方便，我们可以设置一个快捷方式。调整 package.json 文件，添加一个 npm scripts：

有了这句话  我们 在终端 直接运行npm run build  就能打包

只不过 这样 过于繁琐  每次 还得删掉 npm run build  生成的dist文件

当然  我们也可以用

clean-webpack-plugin

使用clean-webpack-plugin 在打包之前做清空dist的操作

#安装
npm install clean-webpack-plugin --save-dev

#配置
webpack.config.js
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

// 配置插件
  plugins:[
    // 在打包之前做清空dist的操作
    new CleanWebpackPlugin()
  ]

 但是  还不推荐

第九步  简化上面的打包方式   能够在每次修改的时候 进行页面的同步修改

实现webpack的实时重新加载(live reloading)

运行npm i webpack-dev-server --save-dev安装到开发依赖

这样配置一下  就可以

然后  运行 npm run serve  就会出现这个

 如下引入一下

 

修改代码  返回去看 页面就自己刷新了 

当然  这样已经很方便了   我们还可以更懒

配置这样的节点

 

这样 运行npm run start  就可以自动打开浏览器 且 能自动刷新页面

 没有上面的前提  打开页面 可能什么 都没有！！！

tips：

 

实现自动打开浏览器、热更新和配置浏览器的默认端口号

方式1：

• 修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新：

"start": "webpack serve --hot --port 3003 --open"

方式2：

修改webpack.config.js文件，新增devServer节点如下：

devServer:{
        hot:true,
        open:true,
        host:
        port:3003
    }