webpack基础配置

1.全局安装：$ npm install webpack webpack-cli -g；

查看版本信息：webpack：4.39.3 webpack-cli：3.7.7

2.创建文件夹webpack，打开终端 npm init-y

3.局部安装：$ npm install webpack webpack-cli -D；

4.在webpack下面创建src目录，在src目录创建index.js文件，这就是项目入口文件（项目运行的第一个文件）

5.运行命令webpack，会自动创建dist目录（出口文件），目录下有个main.js文件就是打包后的文件（文件里一个自执行函数就是一个模块）（eval解释和执行js语法的字符串）

6.在webpack目录下创建config目录，在config目录下创建confi.dev.js(开发环境)和confi.prod.js(生产环境)[文件类型：node.js文件；模块化规范：common.js规范]{这个文件是webpack配置整个项目的配置文件，代替终端执行命令的文件}

const path = require('path')

// 1. 创建模块

const webpackConfig = {

entry: './src/index.js', //网络路径（ 相对路径 ）

output: { //出口目录、文件的配置

path: path.join( __dirname,'../build'), // 磁盘路径

filename: 'app.js' // 入口文件将来打包到出口目录中的文件的路径和名称

},

mode: 'development',//确定是生产环境还是开发环境的打包

module: { //这里用来存放转换器的配置

rules: [

// {} //每一个对象就是一个转换器的配置

{//css的处理

test: /\.css$/, // 整个项目下匹配 .css结尾的文件

use: ['style-loader','css-loader'] //两个顺序是不写反的

// 我们需要使用css-loader将css文件编译为js,然后通过style-loader将js处理插入到html文件中【 style 嵌入模式 】

}

]

},}

// 2. 导出模块

module.exports = webpackConfig

在package.json文件里面设置"dev":"webpack --config config/webpack.config.dev.js",就可以在终端运行npm run dev命令，开发环境同理。