1,初始化
npm init -y
生产package.json文件
2,创建src文件夹
3,创建index.html
ul>li{这是第$个li}*9
4,npm install jquery -s
发现需要解决js兼容性问题，
import $ from 'jquery' 通过发现这种方式导入报错，
5,安装webpack
1, npm install webpack webpack-cli -D
2, 创建webpack.config.js文件
3, module.exports = {
mode: "development"
}
4,package.json文件中配置scripts命令
"dev": "webpack"
5, 运行： npm run dev
6,webpack 默认约定
打包入口文件： src->index.js
打包出口文件： dist-> main.js
7,webpack 自动打包功能
1, npm install webpack-dev-server -D
2, 修改package.json -> scripts中的dev命令
"scripts" {
"dev": "webpack-dev-server"
}
3, 将src -> index.html中的srcipt脚步引用路径修改为"/bundle.js"
4, 再次执行运行 npm run dev
****注意****
webpack-dev-server 会启动一个实时打包的http 服务器
webpack-dev-server
打包生产的输出文件，默认放到了项目根目录中，而且是虚拟的，看不见的
8,webpack 配置html-webpack-plugin 生产预览页面
1， npm install html-webpack-plugin -D
2, 修改webpack.config.js文件头部区域，配置下面信息
// 导入生产预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
template: './src/index.html', // 指定要用到的模版
filename: 'index.html // 指定生成文件的名称
})
3, 修改 webpack.config.js 文件
module.exports = {
plugins: [htmlplugin]
}
9,webpack 配置自动打包参数
package.json中配置， open, host, port
"scripts" {
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
}
10,打包处理css文件
1， npm install style-loader css-loader -D 处理css文件的loader
2， 在webpack.config.js中添加配置loader
module: {
rules: [
{test: /\.css$/, use:['style-loader','css-loader']}
]
}
****注意****
use数组中指定的loader顺序固定的
多个loader 的调用顺序：从后往前调用
11,打包处理less,scss文件
npm install less-loader -D
{test: /\.less$/, use:['style-loader','css-loader','less-loader']}
npm install sass-loader node-sass -D
{test: /\.scss$/, use:['style-loader','css-loader','scss-loader']}
注意 可能会报错：Error: Cannot find module 'less' 解决： npm install less -D
12,配置postCSS 自动添加css的兼容性前缀
1, npm install postcss-loader autoprefixer -D
2, 在项目中创建postcss的配置文件postcss.config.js 并初始化配置
const autoperfixer = require('autoprefixer') // 导入自动添加前缀的插件
module.exports = {
plugins: [autoperfixer]
}
3, 在webpack.config.j的module->rules中，新增一个loader
module: {
rules: [
{test: /\.css$/, use:['style-loader','css-loader','postcss-loader']}
]
}
13,打包样式表中的图片和字体文件
1， 运行 npm install url-loader file-loader -D 文件
2， 在 webpack.config.js 的module->rules添加 loader规则
module: {
rules: [
{test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use: 'url-loader?limit=16940'}
]
}
注意：?limit是对图片的大小做了限制
14,webpack 打包处理JS文件中的高级语法
1，安装babel转换器相关的包
npm install babel-loader @babel/core @babel/runtime -D
2, 安装babel语法插件相关的包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3, 在项目中创建babel-config.js,并初始化配置
module.exports = {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}
4, 在webpack.config.js中新增一个loader规则
{test: /\.js$/,use: 'babel-loader', exclude: /node_modules/}
注意： 必须要有exclude这一项， 因为node_modules的js是第三方插件，不要babel-loader再次处理
