webpack4的安装与打包（简单版）

webpack的安装

// 创建一个新的文件夹
mkdir demo  

// 进入该文件夹
cd demo  

// 在文件夹下初始话npm，一路回车即可
npm init  

// 先全局安装 （4后webpack-cli要手动安装）
npm install webpack webpack-cli -g   

// 再本地安装
npm install webpack webpack-cli --save-dev 

// 安装成功后demo文件夹下会出现package.json

// 查看版本号
webpack -v

 

打包命令

在demo文件夹下，建一个js文件，如：main.js，执行打包命令

// 第一个是文件名称，第二个是目标文件名称，webpack4后要加-o
webpack main.js -o build.js  

可以成功打包，但会报警告，提示说需要指定mode

 

webpack配置

由于webpack更新4.0后，很多要求的变严格了，如果不配置的话，不但会影响打包速度，而且会不断的输出警告。

创建一个webpack.config.js文件,内容如下

module.exports = {
    //开发模式
    mode:'development',

    //入口
    entry:{
        main:"./main.js"
    },

    // 出口
    output:{
        filename:'./build.js'
    },

    // 监听文件改动，自动打包
    watch: true,
}

// 在控制台执行打包命令
webpack

 

打包后在html中运用

如果打包时需要给js加上版本号，html动态加入js，则需要使用html-webpack-plugin。

// 安装html-webpack-plugin
npm install html-webpack-plugin --save-dev

module.exports = {
    //开发模式
    mode:'development',

    //入口
    entry:{
        main:"./main.js"
    },

    // 出口
    output:{
        path: __dirname + '/dist', // __dirname表示当前路径的绝对路径
        filename:'js/[name]-[chunkhash].js'
        // name是entry中的key
        // chunkhash相当于文件版本号，若文件内容有改变则chunkhash会改变
    },
    // 监听文件改动，自动打包
    watch: true,
    plugins: [
        new htmlWebpackPlugin({
            // filename: "index-[hash].html",
            template: "index.html",
            minify: { // 压缩
                removeComments: true, //删除注释
                collapseWhitespace: true // 删除空格
            },
            inject: 'head' //插到html的head中
        })
    ]
}

在目录下建一个html文件作为html模板，如index.html，以上配置的意思是将main.js打包后应用到index.html中。并放到dist路径下。