webpack4配置

一、安装webpack

• 需要先在项目中npm init初始化一下，生成package.json
• 建议node版本安装到8.2以上

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

npm i webpack webpack-cli -D

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

 

0配置了什么

webpack4可以支持0配置打包，这里所说的0配置又是什么呢？当然在开发者眼中0配置的东西，那根本是无法用的，因为不够智能，那么我们就来看看做到了哪些0配置

在使用webpack进行打包的时候，默认情况下会将src下的入口文件(index.js)进行打包

// node v8.2版本以后都会有一个npx
// npx会执行bin里的文件

npx webpack     // 不设置mode的情况下 打包出来的文件自动压缩

npx webpack --mode development  // 设置mode为开发模式，打包后的文件不被压缩

这些算是0配置的操作了，名字都是定义好的

webpack是基于Node的

在项目下创建一个webpack.config.js(默认，可修改)文件来配置webpack

module.exports = {
    entry: '',               // 入口文件
    output: {},              // 出口文件
    module: {},              // 处理对应模块
    plugins: [],             // 对应的插件
    devServer: {},           // 开发服务器配置
    mode: 'development'      // 模式配置
}

　　

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

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

npm i webpack-dev-server -D

按照项目的结构，我们就从0开始去写一下配置吧

// webpack.config.js

const path = require('path');

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

　上面就可以说是实现了最简单的webpack配置了，那接下来就打包一下看看

 

配置执行文件

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

 

这样的好处在于可以针对不同的需求进行一个特定的打包配置

原文地址：https://juejin.im/post/5adea0106fb9a07a9d6ff6de

webpack插件API:https://webpack.docschina.org/plugins/extract-text-webpack-plugin/