小白入门前端webpack这个打包编译工具

作用：开发和打包的工具，可以将js、css转换成一个静态文件，减少页面请求。

基本使用

从创建文件目录，到基本可以简单打包的一个操作：

// 全局安装webpack
npm install -g webpack webpack-cli
// 安装css-loader和style-loader插件，因为webpack本身只能处理js模块，处理其他类型的文件需使用loader进行转换。
// css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

// 在项目文件夹中执行初始化命令，生成package.json文件
npm init -y

// 项目中建立src文件夹，并建立三个js文件，a.js、b.js、main.js。一个index.html文件，并引入main.js。
// 其中main.js就是主要的js文件，a和b是被引用的模块代码，下面举例：
// a.js
exports.info=str=>{
    return str;
}
// b.js
exports.info=str=>{
    return "---"+str;
}
// main.js
const a=require('./a);
const b=require('./b);
require("./style.css");// 在src下建立style.css文件写样式，并在这里引入，编译后样式就会生效。
console.log(a.info("我是a呀！")+b.info("我是b呀"));


// 项目下创建webpack.config.js文件
const path=require("path");
module.exports={
    entry:"./src/main.js",//配置入口文件
    output:{
        path:path.resolve(__dirname,'./dist'),//打包后的文件将会放在根目录的dist文件夹下
        fileName:'main_bundle.js'//打包后输出的文件名称
    },
    module:{
        rules:[
            // webpack本身只能处理JS模块，处理其他类型的文件需要使用loader进行转换
            //css-loader 将css装载到JS，style-loader让JS认识css
            {
                test:/\.css$/,//打包规则应用到以.css结尾的文件上
                use:["style-loader","css-loader"]
            }
        ]
    }
}

此时执行webpack --mode==development命令即可编译。为了方便可以在package.js文件的scripts中配置“dev“：webpack --mode=development“后，以npm run dev来启动编译。

热加载

上面配置每次改代码都需要重新执行命令编译一次并且刷新页面，这里可以使用webpack-dev-server来实现更改代码自动更新。

具体操作如下：
 

// 安装webpack-dev-server插件
npm install webpack-dev-server --save
npm install html-webpack-plugin --save


// webpack.config.js增加配置
let HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack=require("webpack");//引入webpack
// 注意plugins是个数组
plugins：[
    new HtmlWebpackPlugin({
        template: './src/index.html'
    }),//如果没有HtmlWebpackPlugin的使用打开的将不是index.html页面，而是打开的这个项目文件下的所有文件信息
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
],
mode:"development",//打包环境：开发/生产
devServer:{
    hot:true,//是否热更新
    port:8000,//启动服务端口
    open:true,//启动服务后是否自动打开浏览器
    // contentBase: "dist" // 指定一个本地服务器路径，否则会默认为根目录
}


// package.json文件中启动命令的变更
// 注意config后面跟的是webapck配置文件的文件名，不固定，根据自己的文件命名变化
"dev": "webpack-dev-server --mode development --config webpack.config.js"

注意：在启用热更新之前，需要手动编译生成js文件并且手动在index.html中引入使用。但是引入了热加载以后，npm run dev并不会生成dist文件并在里面显示编译的后的代码，就跟普通开发没什么两样，但是在配置了打包命令后，执行npm run build就会发现生成了一个dist文件夹，里面还包含了一个html文件和js文件（压缩后的），html中自动引入了js文件。此方式可避免在开发过程中手动引入js，直接在webpack.config.js中配置好了就行了。