目录
0.前端基础
【0.1 - 前端基础】前端开发,工具推荐与环境搭建
【0.2 - 前端基础】Node.js安装与简单使用
【0.3 - 前端基础】NPM包管理器常用命令
【0.4 - 前端基础】ES6简单了解,var、let、const的区别
【0.5 - 前端基础】Babel转码器
【0.6 - 前端基础】模块化开发
【0.7 - 前端基础】Webpack打包
【0.8 - 前端基础】Mock实现模拟数据
1. 全局安装
#Webpack打包
#webpack4.0之前webpack与webpack-cli是整合在一块的,4.0之后则需要两个都安装
npm install -g webpack webpack-cli
#css打包
npm install --save-dev style-loader css-loader
详细了解:webpack官网
2. 项目目录下创建webpack.config.js
const path = require("path") //引入Node.js内置模块
//commonJS导出模块
module.exports = {
entry: './src/index.js', //配置入口文件
//webpack打包配置
output: {
//__dirname:当前文件所在路径
path: path.resolve(__dirname, './test'), //配置输出路径
filename: 'test.js' //输出文件
}
module: {
rules: [
//css打包设置
{
//打包css文件
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}
3. 执行编译命令
webpack --mode=development
package.json配置打包命令
"scripts": {
"dev": "webpack --mode=development"
}
#运行
npm run dev