【0.7 - 前端基础】Webpack打包

目录

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