从零开始webpack4基础配置
首先看一些核心概念：
1.Entry 从 webpack4 开始，不再必须定义 entry point(入口点) ：它将默认为 ./src/index.js。
2.Output 输出属性规定哪里创建以及如何命名输出文件。默认./dist/main.js为主输出文件和./dist任何其他生成文件的文件夹。
3.Loaders 使用加载器来预处理文件。（如babel-loader、css-loader）
4.Plugins 插件利用webpack的编译过程执行一些任务，如优化、环境变量配置
5.Mode 通过设定mode参数设置为development，production或者none。启用对应于每个环境的WebPack内置的优化。
6.Browser Compatibility webpack支持所有符合ES5标准的浏览器（不支持IE8及以下版本）。如果要支持旧版浏览器，则需要加载polyfill以支持一些新的语法。
使用init初始化 package.json。
npm init -y
安装webpack、 webpack-cli 模块
npm i webpack --save-dev
在src目录下新建index.js作为入口文件。此时运行npm run build会发现已经有了dist目录。
此时虽然输出了 ./dist/main.js，但是控制台提醒'mode'使用哪种模式（production(生产) 和 development(开发) 模式。）。
webpack.config.js
module.exports = {
entry: './src/index.js' //需要打包的文件入口
};
开箱即用，webpack不需要您使用配置文件。但是，它将假定您的项目的入口点为src/index并将结果dist/main.js缩小并优化生产。
使用webpack编译的代码中可用的所有方法。使用webpack捆绑应用程序时，您可以选择各种模块语法样式，包括ES6，CommonJS和AMD，推荐使用ES6。
//3种模块化规范
//AMD
define(function() {
return function(a, b) {
return a + b
}
})
require(['./module/amd'], function(amd) {
console.log(amd(1, 2))
})
//commonJS
module.exports = function(a, b) {
return a + b
}
let common = require('./module/common')
console.log(common(1, 2))
//ES6
export default function(a, b) {
return a + b
}
import es6 from './module/es6'
console.log(es6(1, 2))webpack.config.js
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
entry: {
app: './app.js' // 需要打包的文件入口
},
output: {
publicPath: __dirname + '/dist/', // js 引用的路径或者 CDN 地址
path: path.resolve(__dirname, 'dist'), // 打包文件目录
filename: 'bundle.js' // 打包后的 js 文件
},
rules: [
{
test: /\.js$/, // 使用正则来匹配 js 文件
exclude: /node_modules/, // 排除依赖包文件夹
use: {
loader: 'babel-loader' // 使用 babel-loader
}
}
],
"browserslist": [
"> 1%",
"last 2 version",
"not ie <= 8"
],
plugins: [
new CleanWebpackPlugin(), // 默认情况下，此插件将删除 webpack output.path目录中的所有文件，以及每次成功重建后所有未使用的 webpack 资产。
new HtmlWebpackPlugin({
// 打包输出HTML
title: '自动生成 HTML',
minify: {
// 压缩 HTML 文件
removeComments: true, // 移除 HTML 中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true // 压缩内联 css
},
filename: 'index.html', // 生成后的文件名
template: 'index.html' // 根据此模版生成 HTML 文件
})
]
}