webpack 保存文件后自动打包_webpack 4 自动打包并分离 js 和 css 文件

95% emitting

前言：不会写。。。

截止2018.03.30 ，日常 es6及更后的代码浏览器解析起来蛮困难的，所以需要用到相应的打包工具，如webpack、gulp...

当然，如果不用打包工具也可以通过一些工具插件亦可以解析 es6 并转换为 es5 等等，但，打包工具不是更好的选择吗？

哦，对了，对于新手来说，《没入门就放弃之 webpack》。

多注意时间、版本问题。

1、建一个文件夹名为es6

打开命令提示符(cmd)，输入 webpack ，完成。

自动打包完毕。

文章结束。

2、安装配置环境

2.1、安装 node

点击这里下载(node-v9.10.0_64位)，安装过程中记得把环境「Add to PATH」及npm包管理「npm package manager」给选上。

版本： + node@9.10.0 + npm@5.6.0

然后我们打开 cmd 。cd 到当前目录，如下「忽略前面的 > 号」

>G:

>cd localhost/es6

由于我的在 G 盘的创建了，所以需要切换到 G盘 「G:」

2.2、安装 webpack ，执行全局安装

>npm i webpack -g

版本：+ webpack@4.4.1

3、初始化项目

>npm init

提示你 package name (es6): 回车

回车

回车。。。

直到提醒你Is this ok? (yes)，回车！

至此，项目初始化完毕，查看 es6 目录会看到一个 package.json 文件。

内容大致如下：

4、建立测试文件

目录内新建一个 index.html 文件，并输入下面测试代码

html>

Hi

Hello world!

目录内新建一个 index.js 文件，并输入下面测试代码

import "./js/a.js";// 其他js文件

import "./fonts/iconfont.css";// 字体样式

import "./css/a.css";// 导入 css

import "./css/a.scss";// 导入 sass

const lastArr = arr => arr[arr.length - 1];

const arrTS = [1, 2, 3]

console.log(lastArr(arrTS));

console.log(A.firstUp("this index.js"));

创建 js 目录，新建一个 a.js 文件，并输入下面测试代码

const A = {

firstUp: ([first, ...rest], lowerRest = false) =>

first.toUpperCase() + (lowerRest ? rest.join('').toLowerCase() : rest.join(''))

}

console.log(A.firstUp("this a.js"));

module.exports = A;

创建 css 目录，新建一个 a.css 文件，并输入下面测试代码

body { background: #333 url("../images/20150307111907.png");}

创建 css 目录，新建一个 a.scss 文件，并输入下面测试代码

body {

font-size: 36px;

color: #fff;

i {

font-size: 72px;

color: coral;

}

}

创建 images 目录，放入以下图片

创建 fonts 目录，并放入以下字体

[download id="787"]

进入正题

5、搭建代码解析、转码环境

5.1 添加 ES6 代码解析包

回到 cmd ，继续操作，webpack 打包嘛，肯定需要用到 webpack ，安装

>npm i -D webpack

i 表示 install ，-D 表示 --savs-dev

版本：+ webpack@4.4.1

babel ，ES 代码转换的经典之选，由于以 loader 的形式挂载，则需要用到 loader 包，安装

>npm i -D babel-loader

版本：+ babel-loader@7.1.4

安装 bable-loader 前提是需要 babel-core ，安装

>npm i -D babel-core

版本：+ babel-core@6.26.0

ES 6 转换 ES 5 用到的是 es2015、react、stage-3附加包，安装

>npm i -D babel-preset-es2015

>npm i -D babel-preset-react

>npm i -D babel-preset-stage-3

版本：+ babel-preset-es2015@6.24.1 + babel-preset-react@6.24.1 + babel-preset-stage-3@6.24.1

可选：如果需要兼容到 IE 8 及其他旧版本，则需要额外的安装 babel-polyfill 包

>npm i -D babel-polyfill

版本：+ babel-polyfill@6.26.0

各种安装包具体作用，请参考阮一峰的 Babel 入门教程 。

4.2、创建 webpack.config.js 文件

创建 webpack.config.js 文件并输入下方初始化内容

添加 js 文件规则进 rules 中，让 babel-loader 解析

{

test: /\.js$/,

exclude: /node_modules/,

loader: "babel-loader"

}

意思是所有 js 文件都用这个 loader ，排除 node_modules 文件夹

在 index.js 文件中，先注释掉 字体、css、scss 这三个的导入，仅导入 a.js 。

回到 cmd 执行

>webpack

此时会在 es6 目录中生成一个 build 文件夹里面有 main.js 、 main.js.map 文件。

浏览器打开 index.html 在 console 中能看到这几个输出

This a.js

3

This index.js

很好，展示出来了想要的效果，浏览器可以运行。

5、文件处理

5.1、CSS 文件处理

在 index.js 文件中，先注释掉 字体的导入，仅导入 a.js / a.css / a.scss。

回到 cmd 执行

>webpack

它会报错，报错You may need an appropriate loader to handle this file type.

意思是：这个类型文件我读取不了，你问一下度娘怎么才能让我支持吧。

很好，起码你会百度，懂得搜索问题，解决问题。

经了解，CSS 和 SASS 文件需要额外的 loader 包支持，安装

>npm i -D css-loader

>npm i -D sass-loader

版本：+ css-loader@0.28.11 + sass-loader@6.0.7

哦，对了它还需要一个 style-loader 来解析 CSS 样式，解析 sass 需要安装 node-sass 前置包，不安装这个前置包会报错 Module build failed: Error: Cannot find module 'node-sass' ，安装

>npm i -D style-loader

>npm i -D node-sass

版本：+ style-loader@0.20.3

修改 webpack.config.js 文件中的规则，添加下面代码

{

test: /\.css$/,

use: ["style-loader","css-loader"]

},

{

test: /\.scss$/,

use:[

{

loader: "style-loader"

},

{

loader: "css-loader"

},

{

loader: "sass-loader"

}

]

}

意思是 css 文件用 css-loader 解析，scss 文件用sass-loader 解析。

回到 cmd 执行

>webpack

仍旧提示错误：

ERROR in ./images/20150307111907.png

Module parse failed: Unexpected character '�' (1:0)

You may need an appropriate loader to handle this file type.

...

...

说明样式中 body 背景不被支持，那好吧，暂时先移除这个背景图片。

运行 webpack ，可以看到不提示错误了。刷新页面，得到了想要的效果。

但是，发现样式样式粘合到了 HTML 文件中。先不管，搞定图片及字体的加载先。

5.2 图片，字体文件处理

先把刚才样式中的 body 的背景图片引入先，然后在 index.js 文件中，把刚才注释掉的导入全部解除注释，如下

import A from "./js/a.js";// 其他js文件

import "./fonts/iconfont.css";// 字体样式

import "./css/a.css";// 导入 css

import "./css/a.scss";// 导入 sass

安装一个文件处理的 loader ，叫 file-loader ，安装

>npm i -D file-loader

版本：+ file-loader@1.1.11

修改 webpack.config.js 规则，添加图片及字体类型的支持，用 file-loader 挂载

{

test: /\.(png|jpg|gif|svg|icn|bmp|woff|woff2|ttf|otf|eot)/,

loader: "file-loader"

}

cmd 运行 webpack ，刷新浏览器，发现并没有达到效果，查看样式发现已经加载进去了，路径问题！！

在 file-loader后面添加额外的路径及名称变量参数，修改如下

{

test: /\.(png|jpg|gif|svg|icn|bmp|woff|woff2|ttf|otf|eot)/,

loader: "file-loader?name=[path][name][hash].[ext]&publicPath=build"

}

cmd 运行 webpack，刷新浏览器，效果达到。

6、CSS 与 JS 分离

分离插件常用有 2 个，extract-text-webpack-plugin、mini-css-extract-plugin

以 extract-text-webpack-plugin 为例，进行分离，先安装插件

>npm i -D extract-text-webpack-plugin@next

注意：如果是 webpack 3.x 则直接安装 extract-text-webpack-plugin ，4.x 则末尾需要加@next

修改 webpack.config.js 文件，引入该插件，完整配置如下

const path = require("path");

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const extCSS = new ExtractTextPlugin({

filename: "[name].css"

});

module.exports = {

devtool: "#source-map",

entry: path.join(__dirname,"index.js"),

output: {

filename: 'main.js',

path: path.join(__dirname,"build")

},

module: {

rules: [

{

test: /\.js$/,

exclude: /node_modules/,

loader: "babel-loader"

},

{

test: /\.css$/,

loader: ExtractTextPlugin.extract({

use: [

"css-loader"

]

})

},

{

test: /\.scss$/,

loader: ExtractTextPlugin.extract({

use: [{

loader: "css-loader"

},{

loader: "sass-loader"

}]

})

},

{

test: /\.(png|jpg|gif|svg|icn|bmp|woff|woff2|ttf|otf|eot)/,

loader: "file-loader?name=[path][name][hash].[ext]"

}

]

},

plugins: [

extCSS

]

}

注意1：由于分离了CSS文件，不需要指定公共 build 目录，移除&publicPath=build。

回到 cmd 执行

>webpack

刷新浏览器，效果完成。目的达到。

效果图：

7、其他关联问题

7.1、打包进度超级慢，运行 webpack --progress，查看加载到 95% 状态停机，显示 95% emitting 。

解决：需要额外安装 CSS 资源包，名称 optimize-css-assets-webpack-plugin ，如下

>npm i -D optimize-css-assets-webpack-plugin

版本：+ optimize-css-assets-webpack-plugin@4.0.0

7.2、无法通过 npm run dev 或 npm run build，运行出错

npm ERR! missing script: dev

npm ERR! A complete log of this run can be found in:

...

...

解决：对于webpack 4 来说，只需要简单添加模式即可，修改 package.json ，修改 scripts 如下

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"dev": "webpack --mode development --config webpack.config.js",

"build": "webpack --mode production --config webpack.config.js"

},

同时，需要安装 webpack-cli ，为什么？安装

>npm i -D webpack-cli

那么，即可运行。

开发环境：npm run dev

生产环境：npm run build

7.3、不想每次都拨打 webpack 怎么办？有没有自动执行打包的？有

解决：在 cmd 中，输入 webpack --watch ，每次更改代码，webpack 就会自动打包。

7.4、如何连HTML都不用刷新，自动刷新怎么弄？

解决：需要用到热加载，点击这里

教程看到这里，还无法配置出来？

文章源码下载：[download id="803"]

Github 地址：https://github.com/crlang/easy-webpack-4

完毕！