webpack v4

安装

安装node：https://nodejs.org/zh-cn/ -查看node版本：node --version安装npm：node安装后自动安装npm -查看npm版本：npm --version -运行依赖：--save -开发依赖：-dev -全局安装：-g -查询全局安装过的包：npm list -g --depth 0 -查询项目安装过的包：npm list --depth 0配置package.json（手动或npm init）安装包： -全局安装webpack： npm install --save-dev -g webpack webpack-cli -项目安装webpack： npm install --save-dev webpack webpack-cli

js压缩

文件引入 import otherjs from "./other.js";配置webpack.config.js const {resolve} = require('path'); //node内置核心模块，用来设置路径。 module.exports = { entry: './entry.js', // 入口文件 output: { // 输出配置 filename: 'output1.js', // 输出文件名 path: resolve(__dirname, 'output') //输出文件路径配置 }, //mode: 'development', //开发环境(二选一) mode: 'production', //生产环境(二选一),生产环境自动压缩js }; 打包：webpack

js语法检查

安装包： npm install --save-dev eslint npm install --save-dev eslint-loader npm install --save-dev eslint-config-airbnb-base npm install --save-dev eslint-plugin-import配置webpack.config.js const {resolve} = require('path'); //node内置核心模块，用来设置路径。 module.exports = { entry: './entry.js', // 入口文件 output: { // 输出配置 filename: 'output.js', // 输出文件名 path: resolve(__dirname, 'output') //输出文件路径配置 }, mode: 'development', //开发环境(二选一) //mode: 'production', //生产环境(二选一) module: { rules: [ { test: /\.js$/,//必须匹配选项 loader: 'eslint-loader',//应用loader // 可选项，自动修复eslint的错误 options: { fix: true } } ] } }; 配置package.json "eslintConfig": { "extends": "airbnb-base" } 打包：webpack

js语法转化(加载ES2015 +代码并转换为ES5)

安装包： npm install --save-dev babel-loader @babel/core @babel/preset-env配置webpack.config.js const {resolve} = require('path'); //node内置核心模块，用来设置路径。 module.exports = { entry: './entry.js', // 入口文件 output: { // 输出配置 filename: 'output.js', // 输出文件名 path: resolve(__dirname, 'output') //输出文件路径配置 }, mode: 'development', //开发环境(二选一) //mode: 'production', //生产环境(二选一) module: { rules: [ { test: /\.js$/,//必须匹配选项 exclude: /(node_modules|bower_components)/,//必不匹配选项 //应用loader use: { loader: 'babel-loader', options: { //可选项 presets: ['@babel/preset-env'] } } } ] } }; 打包：webpack

处理less

文件引入 import less from "./less.less";安装包： npm install --save-dev css-loader style-loader less-loader less配置webpack.config.js const {resolve} = require('path'); //node内置核心模块，用来设置路径。 module.exports = { entry: './entry.js', // 入口文件 output: { // 输出配置 filename: 'output.js', // 输出文件名 path: resolve(__dirname, 'output') //输出文件路径配置 }, mode: 'development', //开发环境(二选一) //mode: 'production', //生产环境(二选一) module: { rules: [ { test: /\.less$/,//必须匹配选项 //应用多个loader use: [{ loader: "style-loader" // 通过js字符串创建样式节点 }, { loader: "css-loader" // css转化为CommonJS }, { loader: "less-loader" // less编译为css }] } ] } }; 打包：webpack

处理图片

文件import引入、css中背景图片引入 import image from "./image.jpg"; .bg{background:url(./image.jpg);}安装包： npm install --save-dev file-loader url-loader配置webpack.config.js const {resolve} = require('path'); //node内置核心模块，用来设置路径。 module.exports = { entry: './entry.js', // 入口文件 output: { // 输出配置 filename: 'output.js', // 输出文件名 path: resolve(__dirname, 'output') //输出文件路径配置 }, mode: 'development', //开发环境(二选一) //mode: 'production', //生产环境(二选一) module: { rules: [ { test: /\.(png|jpg|gif)$/,//必须匹配选项 //应用loader use: [ { loader: 'file-loader', options: { //可选项 outputPath: 'images/',//图片输出路径配置 publicPath: '../dist/images/', //修改背景图引入url的路径 limit: 8192 } } ] } ] } }; 打包：webpack