Wbbpack --3配置

Wbbpack --3配置

什么是webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包(modulebundler)当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

module.exports = {
//新建一个文件夹 然后创建一个webpack.config.js文件
}

入口

module.exports = {
    entry:{
        // 告诉应用程序入口文件地址
        app:'./src/index.js'
    }
}

出口

output:{
    filename:'[name].js' // 最终会打包成app.js    app为入口文件配置的key值 即app
    path:__dirname + '/dist'
    // 最终会在当前文件夹下创建一个dist目录 目录中有app.js ————dirname表示绝对路径
}

Webpack安装方法

cnpm/ npm install webpack@3 -g
// 先装全局,在装局部否则会报错
cnpm / npm install webpack@3 -D
// tip : -D等于 (--save-dev) -S 等于 (--save) 安装完成后按webpack可以运行

Webpack插件

webpack4之所以能够使用cnpm run build 打包就是因为配置webpack插件,还有许多功能组件下文尽量写全

(坐等大佬手动写出webpack4版本的webpack3)

压缩js插件

plugins:[ new webpack.optimize.UglifyjsPlugin // 本身webpack就有这个功能这里直接配置接好了 ]

自动引入模块

new HtmlWebpackPlugin({ template: index.html' // 需要先引入插件 cnpm / npm install html-webpack-plugin -D })