webpack
webpack是一个模块打包机,他把项目当作一个整体，通过一个或多个给定的的主文件，webpack将从这个文件开始找到项目的所有依赖文件，使用loaders或plugins处理它们，最后打包成一个或多个浏览器可识别的js文件
安装 webpack 依赖
yarn add webpack webpack-cli -D
配置文件 webpack.config.js
基本概念
- 模式
通过选择
development或production之中的一个，来设置mode参数，你可以启用相应模式下的webpack内置的优化
- 入口
入口起点指示webpack应该使用那个模块，来作为构建其内部依赖图的开始。
- 出口
output属性告诉webpack在那里输出它创建的bundles,以及如何命名这些文件，默认值./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个output字段
- loader
loader让
webpack能够处理那些非javaScript文件(webpack自身只理解javaScript)。loader可以将所有的文件转换webpack能够处理的有效模块。
- plugins
loader被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。
基础配置
const path = require('path')
module.exports = {
mode: 'development',
entry: './index.js' // 打包入口文件
output: {
path: path.resolve(__dirname,'dist') //项目打包基础目录，
filename: 'main.js'
},
}
配置开发服务器
yarn add webpack-dev-server -D
{
devServer: {
port: 3000,
progress:true,
compress: true,
contentBase: './dist',
}
}
自动生成html模版
html-webpack-plugin
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
minify: {
removeAttributeQuotes: true
//collapseWhitespace: true
}
// hash: true
}),
css处理
- 识别css模块
- 引入link标签
- 浏览器兼容前缀
yarn add css-loader style-loader postcss-loader autoprefixer
module: {
rules: [
{
test: /\.css$/i,
use: [style-loader, 'css-loader', 'postcss-loader']
},
]
}
新建postcss.config.js
module.exports = {
plugins: [require('autoprefixer')]
};
处理less
yarn add less-loader
module: {
rules: [
{
test: /\.less$/i,
use: [style-loader, 'css-loader', 'postcss-loader','less-loader']
},
]
}
es6 转 es5
yarn add babel-loader @babel/core @babel/preset-env -D
{
test: /\.js$/i,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties']
}
}
}
es7 支持
yarn add '@babel/polyfill' // 不要-D
import ('@babel/polyfill')
配置 eslint
yarn add eslint eslint-loader
{
test:'/\.css$/i',
use: {
loader: 'eslint-loader',
option: {
enforce: 'pre' // pre
}
}
}
// 根目录下新建.eslintrc.json
webpack 打包图片
1、在js中创建图片来引入
yarn add file-loader
{
test: /\.(png|jpg\gif)/i,
loader: 'file-loader '
}
2、在css中引入背景图片
background:url("./logo.png") //css-loder自动转换
3、
yarn add html-withimg-loader -D
{
test: /\..html\$/i,
loader: 'html-withimg-loader'
}
删除原先目录
yarn add clean-wbpack-plugin -D
new CleanWbpackPlugin('./dist')
webpack跨域问题
devServer: {
port: 3000,
progress: true,
contentBase: './dist',
open: true,
compress: true, //压缩,
proxy: {
'/api': 'www.baidu.com'
// https://segmentfault.com/a/1190000016199721?utm_source=tag-newest
}
},