爱搞事情的webpack

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

webpack

当 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就可以显示啦。

不过坑爹依旧☺……用的时候报错喽～

缺俩文件

第一次就说缺style-loader，好吧……自觉点把另一个一起安装了把。

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

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

此时的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/目录下了。

效果

可以看到预览链接里面的文字啦

动态效果可以看下图


动态效果

postcss-loader

上述代码有个小问题使用了display： flex把ul>li变成了横排，但是这玩意有兼容性。当初我的一篇文章唯一的一个评论就是这么说我的……

没有考虑兼容性

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

autoprefixer过期了

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 "…
  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，就很尴尬了

最开始由一个错误引起

window未定义

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在前方等着我去探索……各种稀奇古怪的配置文件……痛并快乐着☺

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

工具这个东西嘛

怎么办
  1. 配置出错了怎么办，默念三句
配置出错了怎么办
  1. 如果真的搞蹦了怎么办。熊得，送你一句名言

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

新的挑战者parcel

现在的吐槽大概是没有经历过以前更蛋疼的日子吧，幸好有了新的后起之秀---parcel，它的官网老厉害了，智能提示我用了中文，真是贴心。

回顾一下webpack的首页

webpack

在对比一下parcel的首页

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、修改配置内容、安装插件才能实现上述的功能。

快速开始

模块化和scss的解析很方便

当我在parcel-demo目录下使用parcel index.html的时候，它自动发现我引入了index.js。

<body>
  <script src="./index.js"></script>
</body>
模块化
  1. 里面的内容是模块化的内容，它自动帮我转成了dist/parcel-demo.js，我在webpack的时候需要babel-loader
  2. 我用的是scss,它也会自动发现，并且竟然

还帮我自动下载了node-sass

自动下载

其他的特点都在官网去发掘吧～希望日后parcel快速崛起吧

而现在我还是要用webpack的……

用webpack
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,839评论 6赞 482
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,543评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,116评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,371评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,384评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,111评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,416评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,053评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,558评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,756评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,324评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2赞 345

推荐阅读更多精彩内容

  • webpack教程
    无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅，特此分享以备自己日后查看，也希望更多的人看到...
    小小字符阅读 8,140评论 7赞 35
  • webpack 从入门到工程实践
    GitChat技术杂谈 前言 本文较长，为了节省你的阅读时间，在文前列写作思路如下： 什么是 webpack，它要...
    萧玄辞阅读 12,674评论 7赞 110
  • webpack介绍、配置、使用
    版权声明：本文为博主原创文章，未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,028评论 0赞 21
  • Gulp和Webpack的差异
    在现在的前端开发中，前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,431评论 1赞 32
  • 第220天总结
    291976-陈国艳《2017-9-19》 【连续第23天育儿总结】 A目标完成情况 1.演讲渠道版ppt30分钟...
    国艳更文的365天阅读 309评论 0赞 1