webpack4.0学习

webpack安装

• 安装本地的webpack
• webpack webpack-cli -D

webpack可以进行0配置

• 打包工具 - > 输出后的结果（js模块）
• 打包（支持js的模块化）

手动配置webpack

• 默认配置文件的名字 webpack.config.js

//webpack 用node的写法
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devServer:{  //开发服务器的配置
        port:3000,
        progress:true,
        contentBase:'./dist',
        compress:true
    },
    mode:'production',//模式  默认两种  production development
    entry:'./src/index.js', //入口
    output:{
        filename:'bundle.[hash:8].js',  //打包后的文件名
        path:path.resolve(__dirname,'dist')//路径必须是一个绝对路径
    },
    plugins:[        //数组，放着所有的webpack插件
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html',
            minify:{          
                removeAttributeQuotes:true,    //删除双引号
                collapseWhitespace:true   //一行显示
            },
            hash:true    
        })
    ]
}

• package.json配置

{
  "name": "webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server"
  },
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  }
}