这是我参与更文挑战的第7天，活动详情查看：更文挑战
起步
-
执行
npm init初始化工程 -
新建src文件夹，用于存放项目代码
-
新建build文件夹，用于存放项目打包后的输出文件
-
在index1.js中输入
import person from './person.json' console.log(person) function add(x, y) { return x + y } console.log(add(2, 3)) 复制代码 -
控制台执行
webpack ./src/index -o ./build/build.js ---mode=development -
这句话的意思是打包 ./src/index.js 输出到 ./build/index.js 文件中，开发模式
-
为了简化操作，可以将这个命令写入到package.json配置文件中，为它起一个别名
-
在script属性中添加 ：
"build": "webpack ./src/index.js -o ./build/build.js ---mode=development"
此后可以执行 npm run build来替代这串命令达到相同的效果
打包信息包含文件大小，时间，哈希值
打包css
-
新建
webpack.config.js，webpack的配置文件const path = require('path') module.exports = { entry: './src/index.js', //入口文件 output: { //输出文件 filename: 'build.js', //输出的文件名 path: path.resolve(__dirname, 'build') //输出文件的路径 }, module: { //依赖的模块 rules: [{ test: /\.css$/, //匹配后缀名为css的的文件 use: [//书写顺序不能错 'style-loader', //将js中样式的字符串变为head标签插入到html页面中 'css-loader', //将css文件中的样式变为js字符串 ] }, ] }, plugins: [], mode: 'development', } 复制代码 -
新建CSS 文件
//写入简单样式 html, body { margin: 0; } body { background-color: aqua; } 复制代码 -
在入口文件index.js处
import './index.css'引入index.css -
重新打包后可以看到build.js中引入了index.css
-
打开index.html文件，看到内部引入样式
打包html
-
下载插件 html-webpack-plugin
-
引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin') -
webpakc.config.js中添加配置
plugins: [ new HtmlWebpackPlugin({ title: 'Output Management'//html文件的title标题 template: './src/index.html',//自定义模板文件 }) ], 复制代码
可能报错：Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
解决方法： npm install webpack --save-dev当前项目中重新安装webpack （全局安装可能找不到）
打包图片
file-loader
-
下载file-loader
npm install file-loader -D -
在module中添加配置
{ test: /\.(jpg|jpg|gif)$/,//匹配后缀名为这些的文件 use: [{ loader: 'file-loader', options: {//file-loader的配置选项 } }] } 复制代码
url-loader
url-loader作用与file-loader作用相似，只是多了一个限制文件大小的功能
-
下载插件
npm install url-loader -D -
在module中添加配置
rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192//当文件大小 ，小于8192字节时，以base64的格式引入，否则正常引入（路径的形式） } } ] } ] 复制代码
devServer
更改文件时可以自动打包，避免重复打包，提高开发效率
-
下载插件
npm install webpack-dev-server -D -
添加一个devServer属性来保存配置
devServer: { contentBase: path.resolve(__dirname, 'build'),//指向服务器资源的根目录 compress: true,//是否压缩 port: 3000,//端口号 open: true,//是否自动打开浏览器 } 复制代码
抽取css文件
-
style-loader依赖是将css插入到html文件的head标签中，内部引入
-
对于项目工程来说，显然不合理，引入插件
npm install mini-css-extract-plugin -D -
在plugins属性中添加配置
//const MiniCssExtractPlugin = require('mini-css-extract-plugin')//引入 new MiniCssExtractPlugin({ filename: 'css/build.css' }) 复制代码 -
module中更改css加载方式
{ test: /\.css$/, use: [ // 'style-loader',//生成style标签放入style中 MiniCssExtractPlugin.loader,//link标签外部引入 'css-loader', ] } 复制代码
css压缩
-
下载插件
npm install optimize-css-assets-webpack-plugin -D -
在plugins中配置
//const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')//提前引入 new OptimizeCssAssetsWebpackPlugin() 复制代码
js语法检查
-
所用的 eslint-loader 依赖于 eslint ，执行
npm install eslint eslint-loader -D -
使用airbnb规范，下载一个 eslin-config-airbnb-base包，而这个包又依赖于 eslint-plugin-import 所以
npm instal eslint-config-base eslint-plugin-import -D
-
module中添加校验规则
{ test: /\.js$/,//匹配js文件 exclude: /node_modules/,//排除 node_modules文件夹中的内容，不校验 loader: 'eslint-loader',//依赖 options: {}//配置项 } 复制代码 -
在 package.json中额外添加一个属性—-**eslintConfig **
"eslintConfig":{ "extends":"airbnb-base"//继承 airbnb-base } 复制代码 -
打包文件可以看到一堆报错,然后根据提示去一点点更改错误
js的兼容性处理
babel-loader
-
下载
npm install babel-loader @babel/preset-env -D -
module中配置规则
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: [ '@babel/preset-env' ] } } 复制代码 -
在js文件中添加es6语法
-
打包之后可以看到打包后的文件，语法有了变化，由const 变为var
@babel/polyfill全部兼容
- 下载
npm install @babel/polyfill - D - 直接在js文件顶部引入
import '@babel/polyfill' - 打包后的文件过大
core.js按需加载兼容
-
下载
npm install core.js -D -
在module中添加配置
{ test: /\.js$/,//匹配js文件 exclude: /node_modules/,//排除node_modules中的文件，不进行操作 loader: 'babel-loader',//依赖 options: {//配置项 presets: [ [ '@babel/preset-env', { useBuiltIns: 'usage',//按需加载 corejs: { version: 3//core.js的版本 }, targets: { chrome: '60',//兼容chrome到60版本 firefox: '60', ie: '9', safari: '10', edge: '17', } } ] ] } }, 复制代码
注意点
- babel-loader只能兼容简单的语法，对于复杂的语法 如promise不能兼容
- @babel/polyfill使用简单，但是打包后文件过大
- 推荐使用 core.js按需加载兼容
清除上一次打包的文件
- 下载插件
npm install clen-webpack-plugin -D - 引入插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin') - 在webpack.config.js 中 plugin配置
new CleanWebpackPlugin()
复制代码匹配后缀名的优先顺序
resolve:{
extensions: ['.js', '.vue', '.json'],// "extensions"
}
复制代码完整配置文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/build.js',
path: path.resolve(__dirname, 'build')
},
module: {
rules: [{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
]
},
{
test: /\.(jpg|png|gif)$/,
loader: 'file-loader',
},
// {
// test: /\.js$/,
// exclude: /node_modules/,
// loader: 'babel-loader',
// options: {
// presets: [
// [
// '@babel/preset-env',
// {
// useBuiltIns: 'usage',
// corejs: {
// version: 3
// },
// targets: {
// chrome: '60',
// firefox: '60',
// ie: '9',
// safari: '10',
// edge: '17',
// }
// }
// ]
// ]
// }
// },
// {
// test: /\.js$/,
// exclude: /node_modules/,
// loader: 'eslint-loader',
// options: {}
// }
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify:{
collapseWhitespace:true,
removeComments:true,
}
}),
new MiniCssExtractPlugin({
filename: 'css/index.css',
}),
new OptimizeCssAssetsWebpackPlugin({
})
],
mode: "production",
devServer: {
hot:true,
port: 3000,
open: true,
compress: true, //是否压缩文件
contentBase: path.resolve(__dirname, 'build')
}
}
复制代码
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
