webpack 4 自动打包并分离 js 和 css 文件

当前位置： 首页 » 记录 » javascript » webpack 4 自动打包并分离 js 和 css 文件

分类： javascript 7090阅读阅读模式

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 到当前目录，如下「忽略前面的 > 号」

  1. >G:
  3. >cd localhost/es6

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

2.2、安装 webpack ，执行全局安装
  1. >npm i webpack -g

 版本：+ webpack@4.4.1

 

 

3、初始化项目

  1. >npm init

提示你 package name (es6): 回车

回车

回车。。。

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

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

内容大致如下：

 

 

4、建立测试文件

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

  1. <!DOCTYPE html>
  2. <html lang="zh-Hans">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Hi</title>
  6.   <link rel="stylesheet" href="build/main.css">
  7.   <script src="build/main.js"></script>
  8. </head>
  9. <body>
  10.   <i class="iconfont icon-set"></i>Hello world!
  11. </body>
  12. </html>

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

  1. import "./js/a.js";// 其他js文件
  2. import "./fonts/iconfont.css";// 字体样式
  3. import "./css/a.css";// 导入 css
  4. import "./css/a.scss";// 导入 sass
  6. const lastArr = arr => arr[arr.length - 1];
  7. const arrTS = [1, 2, 3]
  8. console.log(lastArr(arrTS));
  9. console.log(A.firstUp("this index.js"));

 

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

  1. const A = {
  2.   firstUp: ([first, ...rest], lowerRest = false) =>
  3.   first.toUpperCase() + (lowerRest ? rest.join('').toLowerCase() : rest.join(''))
  4. }
  5. console.log(A.firstUp("this a.js"));
  6. module.exports = A;

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

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

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

  1. body {
  2.   font-size: 36px;
  3.   color: #fff;
  4.   i {
  5.     font-size: 72px;
  6.     color: coral;
  7.   }
  8. }

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

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

[download id="787"]

 

 

进入正题

 

 

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

5.1 添加 ES6 代码解析包

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

  1. >npm i -D webpack

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

版本：+ webpack@4.4.1

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

  1. >npm i -D babel-loader

版本：+ babel-loader@7.1.4

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

  1. >npm i -D babel-core

 版本：+ babel-core@6.26.0

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

  1. >npm i -D babel-preset-es2015
  3. >npm i -D babel-preset-react
  5. >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 包

  1. >npm i -D babel-polyfill

版本：+ babel-polyfill@6.26.0

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

 

4.2、创建 webpack.config.js 文件

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

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

  1. {
  2.   test: /\.js$/,
  3.   exclude: /node_modules/,
  4.   loader: "babel-loader"
  5. }

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

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

回到 cmd 执行

  1. >webpack

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

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

  1. This a.js
  2. 3
  3. This index.js

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

 

 

5、文件处理

5.1、CSS 文件处理

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

回到 cmd 执行

  1. >webpack

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

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

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

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

  1. >npm i -D css-loader
  3. >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' ，安装

  1. >npm i -D style-loader
  3. >npm i -D node-sass

版本：+ style-loader@0.20.3

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

  1. {
  2.   test: /\.css$/,
  3.   use: ["style-loader","css-loader"]
  4. },
  5. {
  6.   test: /\.scss$/,
  7.   use:[
  8.     {
  9.       loader: "style-loader"
  10.     },
  11.     {
  12.       loader: "css-loader"
  13.     },
  14.     {
  15.       loader: "sass-loader"
  16.     }
  17.   ]
  18. }

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

为啥这么写？解析传送们：webpack学习笔记-1-css-loader & style-loader

回到 cmd 执行

  1. >webpack

仍旧提示错误：

  1. ERROR in ./images/20150307111907.png
  2. Module parse failed: Unexpected character '�' (1:0)
  3. You may need an appropriate loader to handle this file type.
  4. ...
  5. ...

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

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

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

 

5.2 图片，字体文件处理

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

  1. import A from "./js/a.js";// 其他js文件
  2. import "./fonts/iconfont.css";// 字体样式
  3. import "./css/a.css";// 导入 css
  4. import "./css/a.scss";// 导入 sass

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

  1. >npm i -D file-loader

版本：+ file-loader@1.1.11

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

  1. {
  2.   test: /\.(png|jpg|gif|svg|icn|bmp|woff|woff2|ttf|otf|eot)/,
  3.   loader: "file-loader"
  4. }

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

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

  1. {
  2.   test: /\.(png|jpg|gif|svg|icn|bmp|woff|woff2|ttf|otf|eot)/,
  3.   loader: "file-loader?name=[path][name][hash].[ext]&publicPath=build"
  4. }

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

参数什么意思？介绍传送门：file-loader · webpack 中文文档(v3.5.5)

 

 

6、CSS 与 JS 分离

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

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

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

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

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

  1. const path = require("path");
  2. const ExtractTextPlugin = require('extract-text-webpack-plugin');
  3. const extCSS = new ExtractTextPlugin({
  4.   filename: "[name].css"
  5. });
  6. module.exports = {
  7.   devtool: "#source-map",
  8.   entry: path.join(__dirname,"index.js"),
  9.   output: {
  10.     filename: 'main.js',
  11.     path: path.join(__dirname,"build")
  12.   },
  13.   module: {
  14.     rules: [
  15.       {
  16.         test: /\.js$/,
  17.         exclude: /node_modules/,
  18.         loader: "babel-loader"
  19.       },
  20.       {
  21.         test: /\.css$/,
  22.         loader: ExtractTextPlugin.extract({
  23.           use: [
  24.             "css-loader"
  25.           ]
  26.         })
  27.       },
  28.       {
  29.         test: /\.scss$/,
  30.         loader: ExtractTextPlugin.extract({
  31.           use: [{
  32.             loader: "css-loader"
  33.           },{
  34.             loader: "sass-loader"
  35.           }]
  36.         })
  37.       },
  38.       {
  39.         test: /\.(png|jpg|gif|svg|icn|bmp|woff|woff2|ttf|otf|eot)/,
  40.         loader: "file-loader?name=[path][name][hash].[ext]"
  41.       }
  42.     ]
  43.   },
  44.   plugins: [
  45.     extCSS
  46.   ]
  47. }

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

回到 cmd 执行

  1. >webpack

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

效果图：

 

 

7、其他关联问题

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

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

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

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

 

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

  1. npm ERR! missing script: dev
  3. npm ERR! A complete log of this run can be found in:
  4. ...
  5. ...

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

  1. "scripts": {
  2.   "test": "echo \"Error: no test specified\" && exit 1",
  3.   "dev": "webpack --mode development --config webpack.config.js",
  4.   "build": "webpack --mode production --config webpack.config.js"
  5. },

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

  1. >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

 

完毕！

提示：回复可见的文章，回复评论成功后，需要刷新页面才能看到被隐藏的内容！
最后更新：2018年5月25日 永久固定短链接地址：
本文由大朗编写，如有错漏或其他不当，请在下方留言，欢迎指正。

相关文章

评论已关闭。