前言
目前前端最主流,应用最广的webpack总结下
目前常用的构建工具
- facebook官方的create-react-app(官方推荐)
create-react-app
但是现在大部分公司都需要自己能搞定脚手架,所以大家还是能自己搭建为好
(二)webpack基本概念
- 入口(entry)
- 输出(output)
- loader
- 插件(plugins)
- entry
webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。
配置参数
- output
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件。
配置参数
-
loader
webpack loader 将所有类型的文件,转换为应用程序的依赖图(和最终的 bundle)可以直接引用的模块。配置中 loader 有两个目标:
test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性,表示进行转换时,应该使用哪个 loader。
- plugins
插件目的在于解决 loader 无法实现的其他事。比如 压缩js(uglifyjs-webpack-plugin),压缩css(optimize-css-assets-webpack-plugin),将js中的css分离独立出来(extract-text-webpack-plugin)等
(三)搭建webpack基础环境
- 初始化项目目录
$ mkdir webpack-demo
$ cd webpack-demo
$ npm init -y // -y的意思是默认安装
新建四个文件,分别是webpack.base.js(基础环境),webpack.dev.js(开发环境),webpack.prod.js(生产环境),.gitignore(git忽略文件)
这时候我们的文件目录为
- 配置webpack基本环境设置
注意:-S是安装在生产环境,-D安装在开发环境。
// 模块管理和打包工具
$ npm install webpack@3 -D
// 监听代码自动刷新(注意@3版本对应webpack@4)
$ npm install webpack-dev-server@2 -D
// 安装merge
$ npm i webpack-merge -D
// 安装html处理
$ npm i html-webpack-plugin -D
// 清除插件
$ npm i clean-webpack-plugin -D
// copy 插件
$ npm i copy-webpack-plugin -D
// 安装dev open-browser
$ npm i open-browser-webpack-plugin -D
// 安装 lodash
$ npm install lodash -S
新建public和src文件夹,项目目录为下图
配置webpack.base.js
/**
* @component webpack.base.js
* @description 基础环境
* @time 2018/3/8
* @author **
*/
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成html
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 清除dist
const CopyWebpackPlugin = require('copy-webpack-plugin'); // copy
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
entry: {
app: './src/index.js',
vendor: [
'lodash'
]
},
resolve: {
extensions: [' ', '.js', '.json', '.jsx', '.css', '.less','.json'],
modules: [resolve( "src"), "node_modules"], //绝对路径;
},
module: {
},
plugins: [
new CleanWebpackPlugin(['dist']),
new CopyWebpackPlugin([{
from: "./public",
to: "",
force: true
}]),
new HtmlWebpackPlugin({
filename: 'index.html',//输出的html路径
template: './public/index.html', //html模板路径
chunks: ['app', 'vendor', 'manifest'],
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoc