1、项目初始化，安装依赖
npm init -y
npm install
-y是所有默认都选yes
webpack4两个包要分别安装
npm install webpack --g
npm install webpack-cli --g
webpack4打包方法
webpack ./src/main.js -o ./dist/bundle.js --mode development
2、用webpack命令直接打包
先新建webpack.config.js文件，配置好出入口目录就可以
module.exports = {
//入口路径
entry: path.join(__dirname, './src/main.js'), //打包哪个文件
output: {
path: path.join(__dirname, './dist'), //输出目录
filename: 'bundle.js'
}
}
3、全自动编译，安装webpack-dev-server
npm i webpack-dev-server -D
因为安装在本地，所以无法直接运行webpack-dev-server，要在package.json中加入
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
},
这样运行npm run dev就能直接运行webpack-dev-server，open是自动打开浏览器，port设置端口号，contentBase设置src为根目录，hot局部刷新，不刷新整个JS文件，不刷新加载页面
这个生成的js没有存在磁盘上，所以引用的js要写成根目录
--open 自动打开浏览器
--port 3000 指定端口3000
--contentBase src 内容的根路径
--hot 热重载，热更新。打补丁，实现浏览器的无刷新
要将缓存存在硬盘上，要安装
npm i html-webpack-plugin -D
webpack.config.js
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
// webpack配置文件
module.exports = {
//入口路径
entry: path.join(__dirname, './src/main.js'), //打包哪个文件
output: {
path: path.join(__dirname, './dist'), //输出目录
filename: 'bundle.js'
},
plugins: [
new htmlWebpackPlugin({ //创建一个在内存中生成HTML页面的插件
template: path.join(__dirname, './src/index.html'), //指定模板页面
filename: 'index.html'
})
]
}
这样主页不用写引用js的路径，插件已经自动引用
4、加载CSS文件
安装
npm i style-loader css-loader -D
webpack.config.js的配置文件中追加
module: { //用于配置所有第三方模块加载器
rules: [
{ test: /\.css$/, use:['style-loader', 'css-loader'] } //匹配.css结尾的文件,使用这两个插件处理，先调用右边的loader
]
}
再在main.js中引用css
import './css/index.css'
5、文件处理规则
webpack看到js中的文件处理不了，就会去webpack.config.js找配置规则，先调用右边的
6、处理less和scss文件
安装
npm i less -D
npm i less-loader -D
npm i sass -D
npm i sass-loader -D
webpack.config.js的配置文件中追加
module: { //用于配置所有第三方模块加载器
rules: [
{ test: /\.css$/, use:['style-loader', 'css-loader'] }, //匹配.css结尾的文件,使用这两个插件处理
{ test: /\.less$/, use:['style-loader', 'css-loader','less-loader'] },
{ test: /\.scss$/, use:['style-loader', 'css-loader','sass-loader'] }
]
}
7、处理图片路径的loader
npm i url-loader file-loader -D
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7632&name=[hash:8]-[name].[ext]' }// 处理图片路径的loader，小于7632字节的进行base64编码，name保留原文件名，加入哈希值防止命名重复
引入bootstrap图标无法显示问题
https://www.cnblogs.com/ZaraNet/p/10255965.html
8、处理Vue文件
npm i vue -S
npm i vue-loader vue-template-compiler -D
main.js
import login from "./login.vue"
webpack.config.js
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// webpack配置文件
module.exports = {
//入口路径
entry: path.join(__dirname, './src/main.js'), //打包哪个文件
output: {
path: path.join(__dirname, './dist'), //输出目录
filename: 'bundle.js'
},
plugins: [ //配置插件的节点
new htmlWebpackPlugin({ //创建一个在内存中生成HTML页面的插件
template: path.join(__dirname, './src/index.html'), //指定模板页面
filename: 'index.html'
}),
new VueLoaderPlugin()
],
module: { //用于配置所有第三方模块加载器
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, //匹配.css结尾的文件,使用这两个插件处理
{ test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] },
{ test: /\.scss$/, use: ['style-loader', 'css-loader','sass-loader'] },
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7632&name=[hash:8]-[name].[ext]' },// 处理图片路径的loader
{ test: /\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader' }, //处理字体文件
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //配置babel转换ES6语法
{ test: /\.vue$/, use: 'vue-loader' }
]
}
}
9、mode模式
module.exports = {
mode: 'development' //开发模式
};
//等价于
// webpack.development.config.js
module.exports = {
+ mode: 'development'
- plugins: [
- new webpack.NamedModulesPlugin(),
- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}
module.exports = {
mode: 'production' //生产模式
};
//等价于
// webpack.production.config.js
module.exports = {
+ mode: 'production',
- plugins: [
- new UglifyJsPlugin(/* ... */),
- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
- new webpack.optimize.ModuleConcatenationPlugin(),
- new webpack.NoEmitOnErrorsPlugin()
- ]
}
不同模式打包出来的代码大小不同，按照实际情况打包
webpack打包命令为webpack，可在package.json中加上：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot",
"start": "webpack "
},
网友评论