# webpackFourLearning

**Repository Path**: wuxijing/webpackFourLearning

## Basic Information

- **Project Name**: webpackFourLearning
- **Description**: 学习接触webapck最新版本
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-07-27
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpackFourLearning

#### 项目介绍
学习接触webapck最新版本

#### 软件架构
利用webpack4版本搭建前端开发环境，


#### 学习步骤
一、初始化项目
npm init

二、安装webpack4版本
// webpack4中除了正常安装webpack之外，需要再单独安一个webpack-cli

npm i webpack webpack-cli -D
npm i -D 是 npm install --save-dev 的简写，是指安装模块并保存到 package.json 的 devDependencies中，主要在开发环境中的依赖包

三、根目录下创建webpack.config.js文件
添加主要模块
module.exports = {
    entry: '',               // 入口文件
    output: {},              // 出口文件
    module: {},              // 处理对应模块
    plugins: [],             // 对应的插件
    devServer: {},           // 开发服务器配置
    mode: 'development'      // 模式配置
}

以上就是webpack的正常配置模块

启动devServer需要安装一下webpack-dev-server

npm i webpack-dev-server -D

四、配置webapck
// webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',    // 入口文件
    output: {
        filename: 'bundle.js',      // 打包后的文件名称
        path: path.resolve('dist')  // 打包后的目录，必须是绝对路径
    }
}

工作当中我们打包编译的时候一般都执行npm run dev这样的命令，既然是通过npm执行的命令，
我们就应该找到package.json里的执行脚本去配置一下命令，这里如下图所示

npm run build就是我们打包后的文件，这是生产环境下，上线需要的文件

https://juejin.im/post/5adea0106fb9a07a9d6ff6de




//以下是配置css代码自动添加前缀
cnpm i postcss-loader autoprefixer -D

准备建一个 postcss.config.js文件 配置postcss的