浅谈webpack4.x 入门(一篇足矣)

 //全局安装 npm install -g webpack webpack-cli

 //创建文件夹 mkdir webpack4demo //进入 cd webpack4demo //初始化 npm init -y 

 const s=()=>{ console.log('s init') } s() 

 const path = require("path"); module.exports = { entry: { index: "./scripts/index.js" //入口文件，若不配置webpack4将自动查找src目录下的index.js文件 }, output: { filename: "[name].bundle.js",//输出文件名，[name]表示入口文件js名 path: path.join(__dirname, "dist")//输出文件路径 } } 

    $END$ 

 import acss from './a.css' import c from './c.js' const a={ init(){ console.log("a init bbbaaa") }, cinit(){ c.init() } } export default a; 

 const c={ init(){ console.log("ccccc") } } export default c; 

 body{ background-color: #6b0392; } 

 import a from './a.js' import c from './c.js' const s=()=>{ a.init() a.cinit() c.init() console.log('s init') } s() 

 const path = require("path"); module.exports = { entry: { index: "./scripts/index.js" }, output: { filename: "[name].bundle.[hash].js",//[hash]会在后面生成随机hash值 path: path.join(__dirname, "dist") }, module: { // 处理对应模块 rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]//处理css } ] }, } 

 npm install style-loader css-loader --save-dev

 npm install url-loader file-loader --save-dev

 body{ background-image: url("./timg.jpg-600"); background-color: #a748ca; } 

 module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test:/\.(png|jpg|gif)$/, use:[{ loader:'url-loader', options:{ outputPath:'images/',//输出到images文件夹 limit:500 //是把小于500B的文件打成Base64的格式，写入JS } }] } ] }, 

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

 const path = require("path"); const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin module.exports = { entry: { index: "./scripts/index.js" }, output: { filename: "[name].bundle.[hash].js", path: path.join(__dirname, "dist") }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, plugins: [// 对应的插件 new HtmlWebpackPlugin({ //配置 filename: 'index.html',//输出文件名 template: './index.html',//以当前目录下的index.html文件为模板生成dist/index.html文件 }), ] } 

 npm install clean-webpack-plugin --save-dev

 const CleanWebpackPlugin = require('clean-webpack-plugin');//引入 plugins: [// 对应的插件 new HtmlWebpackPlugin({ //配置 filename: 'index.html',//输出文件名 template: './index.html',//以当前目录下的index.html文件为模板生成dist/index.html文件 }), new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录 ] 

 //之前配置 // new webpack.optimize.SplitChunksPlugin({ // name: 'common', // 如果还要提取公共代码,在新建一个实例 // minChunks: 2, //重复两次之后就提取出来 // chunks: ['index', 'a'] // 指定提取范围 // }), //现在配置 optimization: { splitChunks: { cacheGroups: { commons: { // 抽离自己写的公共代码 chunks: "initial", name: "common", // 打包后的文件名，任意命名 minChunks: 2,//最小引用2次 minSize: 0 // 只要超出0字节就生成一个新包 }, vendor: { // 抽离第三方插件 test: /node_modules/, // 指定是node_modules下的第三方包 chunks: 'initial', name: 'vendor', // 打包后的文件名，任意命名 // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包 priority: 10 }, } } }, 

 npm install webpack-dev-serve --save-dev 

 const webpack = require("webpack"); plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: './index.html', }), new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录 // 热更新，热更新不是刷新 new webpack.HotModuleReplacementPlugin() ], devServer: {//配置此静态文件服务器，可以用来预览打包后项目 inline:true,//打包后加入一个websocket客户端 hot:true,//热加载 contentBase: path.resolve(__dirname, 'dist'),//开发服务运行时的文件根目录 host: 'localhost',//主机地址 port: 9090,//端口号 compress: true//开发服务器是否启动gzip等压缩 }, 

 "scripts": { "dev": "webpack-dev-server --mode development" },