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>
HiHello 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
完毕!