webpack1.X 渐进教程(一)

头像
lutreer
    阅读 5 分钟

    1. 安装webpack

    npm Install webpack －g
    （－g 代表全局安装，这样就不用每个使用webpack的项目都在当前项目中再安装一遍了。）

    2.初步使用

    现在我们不用任何config文件（了解下过程，项目中肯定不会这么用），但是要有一个你想要编译的文件，比如一个js文件，一张图片，一个sass文件。
    下面我们来release一个js文件(test.js，这个文件里只写一句：):

    // test.js

alert('hellow world')

    用法：webpack 入口文件 目标地址
    使用：webpack ./test.js ./dist/bundle.js

    然后你去look一下./dist/bundle.js这个文件的内容，不要care是否看的懂，just一句一句的看两边。

    3.使用配置文件

    webpack ./test.js ./dist/bundle.js 这样的usage体验肯定是不好的，这时候就该配置文件登场了:webpack.config.js,这是webpack默认的配置文件名，当然你也可以修改，这个后面再讲。

    :

    // webpack.config.js
// 这里展示了最最基本的配置

module.exports = {
     entry: './test.js',
     output: {
         path: './dist',
         // filename: '[name]-[chunkhash:8].bundle.js',
         // filename: '[name]-[hash].bundle.js', 下面有解释 chunkhash 和 hash 的区别
         filename: 'bundle.js',
     },
     module: {
         // loaders
     },
     plugins: [
        // plugins
     ]
 }

    chunkhash:当前“代码块”（chunk）的hash值，也可以理解为是代码块内容的md5值，如果代码没有修改，这个值是不会改变的；否则一律改变。
    hash:webpack本次编译的hash值,任何一个文件的改变都会有新的hash生成。

    contenthash:指根据当前文件的内容计算md5。 但是require进来的内容改变也会引起它的改变。
    以上3个值都无法很好的满足现实开发中的需求，因为我们想要的是：我们打开某个编译好的文件，如果它本身的内容有所改变（不包括require进来的文件：css，image等），才去计算新的md5值。
    这里推荐一片文章讲的很清楚：Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案，文中提到的webpack-md5-hash是个很好的选择。(补充：webpack-md5-hash有坑，勿入！坑：vendor引用了修改的chunk，但vendor的hahs并不会改变！)

    其中的module:{}和plugin:[]先忽略不管，下面很快就会讲到。
    Now,我们有了配置文件，执行命令变得simple多了：
    webpack
    就这么一个单词，webpack会去配置文件里找入口文件 and 目标地址。

    4.ES6 or Sass or React or Vue

    可能再项目里用到了es6，或者sass，less等现阶段浏览器不能识别的语言；或者你的文件是.jsxor.vue,这些文件里可能包含了HTML,CSS,SASS,ES6等等浏览器或者你的应用所运行的环境，但是这些环境不能识别这些文件or语法or语言，这个时候就需要先将它们编译成能够被识别并执行的语言or语法。

    Now,让webpack中的主角loader登场。loader中文就是装载器，比如把es6装进es6-loader(这是一个假名字)中，过一会儿，es6－loader里面的es6就变成es5 or es3 了。
    注意：loader相关的配置都写在上面提到的module:{}中。具体用法如下：

    • ES6
      加载器：babel-loader

    用法：先安装npm install babel-loader --save-dev(如果报错，那么就根据提示缺什么 install 什么，比如babel-core等)
    详细用法

    module: {
    loaders: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
    }]
}

    再加一个sass-loader

    • Sass
      加载器：babel-loader

    用法：先安装npm install sass-loader --save-dev(如果报错，那么就根据提示缺什么 install 什么,比如：node-sass,它不是一个loader，但是sass-loader依赖它。)详细用法

    // ...
module: {
    loaders: [{
        test: /\.js/,
        exclude: /node_modules/,
        loader: 'babel-loader'
    },
    
    {
        test: /\.scss/,
        exclude: /node_modules/,
        loader: 'sass-loader'
    }]
}
// ...

    5.更多用法

    Now,我们还剩一个plugins:[]。
    现在我们有一个需求，刚才我们编译好的bundle.js文件要引入到我们的某个.html文件中进行使用。但是如果我们像上面配置的那样加了hash值：[name]-[hash].bundle.js,文件名会由于文件内容的变化而变化，我们总不能 again and again 地修改html文件中的引用路径吧～So,找个插件来帮忙吧:html-webpack-plugin.

    • html-webpack-plugin
      插件：一样要先安装npm install html-webpack-plugin --save-dev

    用法：

    var HtmlWebpackPlugin = require('html-webpack-plugin');

// ...
plugins: [
    new HtmlWebpackPlugin({
        // <title>我的webpack</title>
        title:"我的webpack",
        // [name]-[hash].bundle.js要写入的html文件路径
        // 默认根路径是： output.path ， 默认文件名是： index.html(eg：./dist/index.html)
        filename: './index.html',
        // template: './myIndex.html' 下面会讲到
    })
]
// ...

    上面的配置会将output输出的文件bundle.js自动引入到./dist/index.html文件中

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!--这里就是 HtmlWebpackPlugin的功劳-->
    <title>我的webpack</title>
  </head>
  <body>
  <!--这里就是 HtmlWebpackPlugin的功劳-->
    <script src="bundle.js"></script> 
  </body>
</html>

    上面这个index.html是HtmlWebpackPlugin的功劳自己生成的，所有的内容都需要在new HtmlWebpackPlugin({})中配置好（详细配置说明）。但是，多数情况下，我们会有自己index.html or myIndex.html,这些文件是我们已经添加了样式或者插入了其它代码。这时候template就派上用场了。我们自己的myIndex.html需要是这样的：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- 注意这里的语法，当然你也可以将title写死在这里，这样配置文件中的title便不会起作用！ -->
        <title><%= htmlWebpackPlugin.options.title %></title>
        <link rel="stylesheet" href="style.css">
        <style media="screen">
            .body{
                margin: 0px;
            }
        </style>
    </head>
    <body>
    <script src="other.js"></script>
    </body>
</html>

    生成的文件是这样的：

    <html>
    <head>
        <meta charset="utf-8">
        <title>我的webpack</title>
        <link rel="stylesheet" href="style.css">
        <style media="screen">
            .body{
                margin: 0px;
            }
        </style>
    </head>
    <body>
    <script src="other.js"></script>
    <script src="bundle.js"></script>
    </body>
</html>

    webpack自带的和社区贡献的有很多优秀的插件，比如项目中会用到不支持AMD或者CommonJS的js库，webpack.ProvidePlugin(webpack自带的)妥妥的帮我解决这个问题：

    // ...
plugins: [
    new HtmlWebpackPlugin({
        filename: './dist/index.html'
    }),
    //就可以屁颠屁颠的这么使用了：import $ from 'jquery'
    // 注意：你得先在某处引用jquery.js
    // 必入index.html中：<script src="jquery.js"></script>
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
    })
  ]
  
  // ...
    webpack
    lutreer
    4 声望1 粉丝

    引用和评论

    推荐阅读
    头像
    umi 4 踩坑

    assassin_cike阅读 1.8k

    头像
    手把手教你用webpack打包一个多个模块且不包含共享模块代码的JS库

    heath_learning赞 1阅读 607评论 9

    头像
    前端主流构建工具

    大卫talk阅读 595

    头像
    《95%开发者不知道的vue.config.js高阶玩法》手撕Webpack配置链/SSR优化/多页应用，3倍构建效率实战方案

    月半大熊猫阅读 500

    0 条评论
    得票最新