目录
1、打包js文件
1、找到当前文件夹:
cd pink教学案例
cd vue
cd 资料
cd “Day 04”
cd 课堂代码4
cd LearnVuejs04-v2
cd 01-webpack的使用
cd … (上一个文件夹)
2、初始化:
在终端输入:npm init 就会生成package.json
在终端输入:npm install 生成 package-lock.json
3、建 webpack.config.js
const path = require('path'); // 依赖node动态获取路径
module.exports = {
entry: './src/main.js', // 入口,也就是要打包的js
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js' // 出口,打包生成的js
},
}
4、在package.json文件里的test下加上一句 “bulid”:“webpack”
5、本地安装webpack 在终端输入 npm install webpack@3.6.0 --save-dev
6、打包:在终端输入 npm run build (优先执行本地的webpack,找不到则使用全局webpack)
2、打包css文件
在打包js文件的基础上:
1、在入口js(main.js)添加:require(’./css/normal.css’) 要添加的css文件
2、安装css-loader:在终断输入 npm install --save-dev css-loader
3、安装style-loader:在终端输入 npm install --save-dev style-loader
4、配置:在webpack.config.js中配置
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
// 添加的部分
module: {
rules: [
{
test: /\.css$/,
// css-loader只负责将css文件进行加载
// style-loader负责将样式添加到DOM中
// 使用多个loader时, 是从右向左
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
5、打包 npm run build
3、打包less文件
在打包css文件的基础上:
1、在入口js(main.js)引入less文件,添加:require(’./css/special.less’) 要添加的less文件
2、安装对应的less-loader 在终端输入 npm install --save-dev less-loader less
3、配置:在webpack.config.js中配置
添加一个rules选项,用于处理less文件