爱搞事变的webpack

webpack 是一个当代 Javascript 应用程序的静态模块打包器(module bundler)。

当 webpack 处置惩罚应用程序时，它会递归地构建一个依靠关联图(dependency graph)，个中包含应用程序须要的每一个模块，然后将统统这些模块打包成一个或多个 bundle。

基础装置

1. 部份装置,官方也是引荐装置到项目目次下

mkdir webpack-demo-1
cd webpack-demo-1
npm init -y //天生package.json,而且一同赞同,假如没啥个性化的内容则省了你一同狂按enter
npm install --save-dev webpack //装置到开辟环境内里(devDependicies)

1. webpack基础设置文件

touch webpack.config.js
vi webpack.config.js

设置文件内容以下

const path = require('path');
module.exports = {
entry: './src/index.js', // 这里应用程序最先实行,webpack 最先打包
output: {
// webpack 怎样输出结果的相干选项
  filename: 'bundle.js',//输出资本块的名字(asset chunk)
  path: path.resolve(__dirname, 'dist') // 统统输出文件的目标途径,我的就是./dist/bundle.js
}
};

把当前目次的src下的index.js打包到了dist目次下，而且天生了(emmited)一个洗面革心的bundle.js，内里的代码面目一新啊。

可以有多个进口(entry)

entry: {
scss: './src/css/main.scss', //对象的键名scss 就是输出文件的name
bundle: './src/js/app.js'
},
output: {
filename: "[name].js",
path: path.resolve(__dirname, 'dist/js')
// publicPath: "/output/"
},

多个进口最好写成对象的情势，官网说假如写成了数组，输出的内容会是数组的第一个。

上述代码会在dist/js目次下天生scss.js和bundle.js

path

个中，设置文件的第一行代码运用了Node的内置模块path,而且在它前面加上 __dirname这个全局变量(也就是第七行代码)。可以防备差别操作系统之间的文件途径题目，而且可以使相对途径根据预期事情。
纵然你的index.js内容为空，bundle.js内里也有一些基础的打包代码。

1. 基础的运用

//第一种方法，运用当前目次的node_modules内里的webpack
./node_modules/.bin/webpack
//第二种方法运用npm剧本
//起首在你的package.json内里增加以下代码
{
...
"scripts": {
"build": "webpack"
},
...
}
//然后，运用以下代码即可
npm run bulid
//第三种方法，高版本的npm自带了npx
npx webpack //npx会自动查找当前依靠包中的可实行文件，假如找不到，就会去 PATH 里找。假如照旧找不到，就会帮你装置！

所以说呢，我挑选了第三种运用方法。

babel-loader

ES6或其他版本js转换成通用js代码，毫无疑问应当运用babel，不过在webpack的天下内里一致运用loader，所以我们google webpack babel-loader。
loader 可以将统统范例的文件转换为 webpack 可以处置惩罚的有用模块，然后你就可以应用 webpack 的打包才，对它们举行处置惩罚。

有个坑，很轻易搞错的坑

babel-loader差别版本的装置剧本、设置文件是差别的……

(@ο@) 哇～你搜出的最新的文档用这么小的笔墨通知你，你用webpack 3.x babel-loader 7.x | babel 6.x的去这个链接,webpack 3.x | babel-loader 8.x | babel 7.x的去当前的这链接链接。
好吧，我用上一版本的吧。
所以我的装置剧本是

npm install --save-dev babel-loader babel-core babel-preset-env webpack

设置文件是

//照旧属于webpack.config.js设置的一部份，
module: {
 //这是关于模块的设置
rules: [
   //模块划定规矩（设置 loader、剖析器等选项）
{
    test: /\.js$/, //运用正则推断后缀是js的文件
    exclude: /(node_modules|bower_components)/,
    //除了这两目次下的node_modules|bower_components
use: {
      loader: 'babel-loader', //用这个loader处置惩罚.js的文件
      options: {
        presets: ['env'] //选项，还记得零丁运用babel的时刻竖立的谁人.babelrc嘛，就是谁人作用。
      }
}
}
]
}

借此可以获得loader的两个作用：

1. 识别出应当被对应的 loader 举行转换的那些文件。(运用 test 属性)
2. 转换这些文件，从而使其可以被增加到依靠中（而且终究增加到 bundle 中）(use 属性)
   在./src/js/有module-1.js、module-2.js、app.js三个文件，都是新的语法，用的模块化写法，有的浏览器不支撑，所以须要转化。

//module-1.js代码
function fn(){
console.log(1)
}
export default fn
//module-2.js
function fn(){
console.log(2)
}
export default fn
//app.js
import x from './module-1.js'
import y from './module-2.js'
x()
y()


终究结果，翻开的我的预览链接,运用ctrl+shift+J，会看到打印出1和2

sass-loader

假如运用了预编译的scss言语，要把scss文件变成css并加入到html内里，思绪同上，google webpack scss
获得以下代码

npm install sass-loader node-sass webpack --save-dev

模块设置文件

// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}]
}
};

这个官方的就比较给力了，很清楚地用法

• 先用sass-loader把./src/csa/main.scss编译成main.css
• 再用css-loader把main.css变成相符CommonJS范例的
• 把main.css变成js字符串，并建立style节点，把它放进去，如许html就可以显现啦。

不过坑爹照旧&＃x263a;……用的时刻报错喽～

第一次就说缺style-loader，好吧……自发点把另一个一同装置了把。

npm i --save-dev css-loader style-loader

所以，翻开我的预览链接，会看到我的预览的背景是灰色的。

此时的webpack.config.js终究代码

const path = require('path');
module.exports = {
entry: './src/js/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist/js/')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}
]
}
};

所以借助webpack壮大的模块化，经由过程其构建的依靠关联图(dependency graph)把js、scss都搞到了bundle.js内里，真是牛～

html-loader

原本搞了一个html-loader，优化html，把空格、解释都给紧缩掉，进步机能，然则实际运用中也没有报错，也没啥结果，比较为难……本身埋个坑背面补一补。

Copy Webpack Plugin

如今呢，前面的loader用的都很爽。在src目次下修正完了代码，一个npx webpack，革新就可以看到结果了，体验很棒。
然则本日坐在电脑前面，追念代码，之前在前端工程话的道路上，scss、js、html都是被看管着(wacth)，开四个命令行窗口，只需src下一有风吹草动，就会把修正后的代码更新过去。

• 如今运用的webpack可以完整自动化scss、js了，可我假如修正了src/index.html，dist/也没法获知我的修正啊
• 然后我google一一会，发明了这货Copy Webpack Plugin

哎呀，是个plugin，终究webpack的四大基础概念都到齐了,前面搞了entry output loder，本日用一下plugin。

loader 被用于转换某些范例的模块，而插件则可以用于实行局限更广的使命。插件的局限包含，从打包优化和紧缩，一直到从新定义环境中的变量。

基础装置

npm i -D copy-webpack-plugin

Copy Webpack Plugin设置文件(plugin的和loader的设置文件可不是一个套路。loader是在module.rules数组的每一个对象内里(即rules数组的每一个value)，而plugin是在module的plugins数组内里)

//照旧在webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin')
const cOnfig= {
plugins: [
new CopyWebpackPlugin([ ...patterns ], options)
]
}

Copy Webpack Plugin的github给的代码，一最先把我搞蒙了，和webpack官网的代码不大一样啊。厥后才发明本来用了module.exports = config;
在我的小demo里运用的是

plugins: [
new CopyWebpackPlugin([ {
     //本来一个plugin就是一个对象啊，运用的时刻实例化对象即可
     from: 'src/index.html', //从src/index.html目次下复制
     to: '../index.html',  //到dist/index.html
     toType: 'file' //复制范例是文件
   }], { copyUnmodified: true }) //把未修正的部份也复制过去
 ]

这个插件可以完成许多功用，详细的细节看这里

关于目次的一个小题目

上面代码为何这么写呢 to: '../index.html', ，试了好几遍发明没有报错，就是没有用果，末了搞邃晓了是途径的题目……
还记得 四大基础概念的output内里的path吗，回头看一最先的path

output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist/js/')
},

项目标path是dist/js下，所以应当复制到上一级目次下../也就是dist/目次下了。

可以看到预览链接内里的笔墨啦

动态结果可以看下图

搜检兼容性(虽然这是严谨请求，我照样老忘)，可以去caniuse 看一下,(@ο@) 哇～IE没有绿的哎，支撑太差了。( ⊙ o ⊙ )！万一今后我项目搞大了，IE的用户、老安卓的用户想看我项目咋办呢，只能加一下前缀优化一下啦。
有个挺牛的在线的autoprefixer，也可以去在线转换。
既然运用了webpack就Google webpack autoprefixer，遗憾的发明autoprefixer官方引荐运用postcss-loader

postcss-loader处理兼容性题目

先吐槽一下，这货的文档也是稀烂……

1. 官方装置剧本

npm i -D postcss-loader

1. 须要零丁设置文件postcss.config.js，官方的写法是下面这个（最无语的就是这个……，下面的必错，写出来就是正告人人，官方的也不肯定对）

module.exports = {
 parser: 'sugarss', // 铪？？？？剖析器是sugarss???
 plugins: {
'postcss-import': {},
'postcss-cssnext': {},
'cssnano': {}
}
}

在webpack.config.js的增加时还要注重下面的几点

After setting up your postcss.config.js, add postcss-loader to your webpack.config.js. You can use it standalone or in conjunction with css-loader (recommended). Use it after css-loader and style-loader, but before other preprocessor loaders like e.g sass|less|stylus-loader, if you use any.

这段文档的要点就是让你注重postcss-loader应当在css-loader style-loader以后，然则肯定要在其他的预处置惩罚器preprocessor loaders之前，比方
sass|less|stylus-loader。

1. 官方给了一个引荐的设置代码

//照旧是webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
}
]
}
}

本项目用的是.src/css/main.scss,只能尝试着将上述代码加到响应的位置

rules: [
...
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader", options: { importLoaders: 1 }// translates CSS into CommonJS
}, {
loader: "postcss-loader"
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
...
  ]

下面的几点可都是官网文档没写的，只能本身踩一踩的坑……

1. 运转npx webpack,一连报错，不过是缺必备的module的毛病,也就是缺postcss.config.js内里的postcss-import postcss-cssnext cssnano sugarss 。
   没办法，先npm i -D 上面的四个模块名字，照旧报错，此次是语法毛病
   
   (⊙v⊙)嗯？？？它说我不必要的大括号？？？我这规范的scss语法啊，又不是sass的语法(它省略了大括号和分号)，先Google一波这个毛病。
   终究在在postcss的issue内里发明了千丝万缕,题目果真出在谁人令我迷惑的postcss.config.js内里

毛病缘由剖析

1. 毛病的运用了sugarss的剖析器(这货和sass相似，没有大括号，所以它说我大括号错了，它的特性是Indent-based CSS syntax for PostCSS.SugarSS MIME-type is text/x-sugarss with .sss file extension.)，而我写的是scss语法。
2. postcss-loader哪来的勇气肯定人人都是用的.sss后缀的sugarss语法呢，还敢直接在文档的能干位置引荐稀烂的postcss.config.js，O__O &＃8220;…
3. 那末多的预编译的css语法，果真须要webpack打包东西啊，找到适宜的loader去剖析啊。

解释掉parser: 'sugarss',这句代码，可以运用默许的剖析器去剖析了，一般运转了。
不过检察代码，发明彷佛转换后的css有点小丑

autoprefixer冗余

仔细观察命令行，发明有线索，一个正告

正告信息提醒我说：postcss-cssnext发明有个冗余的autoprefixer插件在我的postcss插件内里，这个可能有不良影响，我应当移除它，由于它已包含在了postcss-cssnext内里。

webpack的正告说的很邃晓，postcss-cssnext是无辜的，而且我肯定根据官网代码走的，没有装置autoprefixer插件，毛病必定在剩下的两个插件内里了。

//修正后的postcss.config.js只剩下这些了
module.exports = {
 plugins: {
   'postcss-import': {}, //1.它错了？
   'postcss-cssnext': {}, //webpack通知我它是明净的
   'cssnano': {} //2.它错了？
 }
}

我挑选了排除法：

1. 先解释'postcss-import': {},，发明没法转换后的css代码不对，申明它是无辜的。
2. 那末题目必定是末了一个插件，解释掉'cssnano': {}，终究完美了，而且代码很幽美。
   

本着打破砂锅问到底的精力，我搜了一下cssnano,在其官网看到了实在的毛病缘由，webpack很明智啊，诚不欺我，果真冗余插件了。

cssnano内里有autoprefixer致使了冗余。

extract-text-webpack-plugin

webpack 把统统的资本都当成了一个模块, CSS、JS 文件 都是资本, 都可以打包到一个 bundle.js 文件中.
然则有时刻须要把款式 零丁的打包成一个文件须要抽离出css文件到零丁的css/下。

运用extract-text-webpack-plugin插件可以做到。

1. 装置剧本

npm install extract-text-webpack-plugin --save-dev

1. 设置webpack.config.js，官方引荐的设置以下，然则须要连系本身的项目修正一下……

const ExtractTextPlugin = require("extract-text-webpack-plugin"); //插件的套路。都要require进来
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader", //失利了就用它剖析
use: "css-loader" //是css文件，就用这个处置惩罚
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}

如今的题目

我假如运用的是scss，就很为难了

最最先由一个毛病引发

Google一下，处理掉error，fallbak内里运用了style-loader，use内里不应当运用了，那末题目又来了

1. 题目一：没法运用style-loader把我的main.scss转化后的css代码插进去到style标签内里。

详见代码解释部份

{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
//假如在use内里写上style-loader，就报错window未被定义，然则不写的话，我的bundle.js内里就没法把css放到style标签内里，只能手动把星散的css加到index.html，很无语。
use: [{
loader: "css-loader", options: { importLoaders: 1 }// translates CSS into CommonJS
}, {
loader: "postcss-loader"
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
})
}

1. 题目2：可以提掏出零丁的css文件，然则没想到怎样放到零丁的css/下，很为难，代码未提交，还在探究中。

题目约莫晓得应当出如今下面这个函数内里

new ExtractTextPlugin({
filename: (getPath) => {
return getPath('../main.css').replace('../js', '../css'); // 本意是天生在dist/css/main.css,结果只是在dist/main.css目次下，没有css/
},
allChunks: true
})

统统的代码都在我的demo内里。

蛋疼的无力吐槽

算……是……搞定了webpack的基础运用了……吧，最简朴的相符我如今手艺栈的种种loader,plugin都邑装置了。
固然，另有无数的webpack的loader、plugin在火线等着我去探究……种种八怪七喇的设置文件……痛并快乐着&＃x263a;

八门五花的设置文件挺让我糟心的……幸亏有了node爸爸帮我啊，webpack爸爸虽然也是比较严肃的，然则省了你用四个命令行窗口的啊，照样很动人的啊。

东西这个东西嘛

1. 设置出错了怎么办，默念三句

1. 假如真的搞蹦了怎么办。熊得，送你一句名言

没有什么bug不是一遍webpack处理不了额，假如有的话，那就来三遍webpaack。总有一天让webpack叫你爸爸！！！

新的挑战者parcel

如今的吐槽大概是没有经历过之前更蛋疼的日子吧，幸好有了新的后起之秀&＃8212;parcel，它的官网老厉害了，智能提醒我用了中文，真是知心。

回忆一下webpack的首页

在对照一下parcel的首页

二者的目标是一样的，不过parcel不须要插件，而且速度快。

疾速最先是真的快

疾速最先

没有设置，最好以html或许js为进口，直接npm init -y , parcel index.html，可以完成index.js。

它会自动帮你打包到dist目次下的一个js文件内里，并复制index.html过去，而这统统只须要上面的一行代码。

1. 一最先我的项目标目次构造
2. 实行parcel index.html的目次构造

而我当时搞webpack的时刻的疾速最先最少须要装置webpack、webpack.config.js、修正设置内容、装置插件才完成上述的功用。

1. 内里的内容是模块化的内容，它自动帮我转成了dist/parcel-demo.js，我在webpack的时刻须要babel-loader
2. 我用的是scss,它也会自动发明，而且居然

还帮我自动下载了node-sass

其他的特性都在官网去挖掘吧～愿望往后parcel疾速兴起吧

而如今我照样要用webpack的……