webpack2 入門筆記

時間 2019-11-11

標籤 webpack2 webpack 入門筆記简体版

原文原文鏈接

i5ting_ztree_toc:webpack2css

webpack2學習html

webpack2基本介紹

介紹

webpack和gulp同樣是一個自動化的構建工具
- 你不想作的東西都交給工具去作，好比混淆，壓縮，移動，合併，添加瀏覽器兼容性詞綴
gulp更適合作簡單的流程性的操做，webpack是專門爲處理SPA應用的複雜文件依賴而出現的vue
- 如圖
- js引用css，js引用圖片，css引用圖片，css引用字體，sass引用sass
- webpack就能夠把上面的東西css都抽出來，全部的圖片都抽出來
webpack主要用於react和vue的構建,普通的靜態頁面用gulp就足夠了

官網

webpack2:https://webpack.js.org/
webpack1:http://webpack.github.io/docs/

webpack1和webpack2的一些區別

webpack2已經不支持在配置文件中自定義屬性
webpack2中在加載器中若是用了options屬性那麼必須配合loader屬性使用，不能用use
webpack2中-loader必定要寫全
webpack2中webpack-dev-server要單獨下載2.x版本，默認是下載1.x版本
https://github.com/jawil/webpack2

快速開始

新建項目結構

安裝依賴

npm install webpack -g
npm install webpack -save-dev

編寫配置文件

var path=require('path')

module.exports = {
    // 指定spa應用的入口文件
    entry: path.resolve(__dirname, 'src/js/app.js'),
    // 指定項目構建的輸出位置
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    }
}

運行

在項目根目錄執行webpack能夠啓動默認配置文件webpack.config.js
運行指定配置文件執行webpack --config webpack.develop.config.js

把運行命令放到package.json文件中

啓動命令還能夠加不少參數webpack --config webpack.develop.config.js --progress --profile --colors
這麼多參數不可能都記住，因此將啓動命令寫到package.json的script標籤中

監聽代碼變化自動從新構建

代碼的變更須要屢次運行npm run develop因此咱們須要自動監聽代碼變更，而後運行構建，因而咱們用到了webpack-dev-server這個模塊

webpack-deve-server介紹

webpack-dev-server封裝了webpack和http模塊
- 因此webpack的全部命令，webpack-deve-server均可以使用
- webpack-dev-server能夠指定一個文件夾啓動一個服務
  - webpack-dev-server啓動的服務全部的內容都構建在內存中
  - 由於構建在內存中速度快，還有一個功能，就是沒有變化的文件，不從新構建，只有變化了的文件才重新執行構建
做用
- 一是監聽文件變化自動從新構建
- 二是自動刷新瀏覽器，能夠熱更新

基本使用

下載npm install webpack-dev-server@9.9.9 -save-dev,注意選擇2.x版本的模塊
修改package.json文件中的命令webpack-dev-server --config webpack.develop.config.js --progress --profile --colors

修改開發配置文件node

webpack2中推薦全部的服務配置信息都寫到配置文件中的devServer屬性中，不要寫在package.json中

基本配置react

devServer: {
   // 指定啓動服務的更目錄
   contentBase: __dirname + '/src',
   // 指定端口號
   port: 8080,
   host: 'localhost',
   // 如下信息無關緊要，爲了完整
   inline: true, 
   historyApiFallback: true,
   noInfo: false,
   // stats: 'minimal',
   // publicPath: publicPath
},

熱更新

能夠不刷新瀏覽器更新
修改配置文件

devServer: {
    // 指定啓動服務的更目錄
    contentBase: __dirname + '/src',
    // 指定端口號
    port: 8080,
    host: 'localhost',
    // 啓用熱更新
    hot: true,
    // 如下信息無關緊要，爲了完整
    inline: true, 
    historyApiFallback: true,
    noInfo: false,
    // stats: 'minimal',
    // publicPath: publicPath
},

須要配合一個內置插件一塊兒使用

var webpack=require('webpack')

plugins: [
   new webpack.HotModuleReplacementPlugin(),
]

Loaders（加載器）

在真正構建以前作一些預處理操做就叫加載器

處理es六、es七、jsx語法加載器

npm install babel-loader --save-dev
npm install babel-core babel-preset-es2015 babel-preset-react -save-dev
npm install babel-preset-stage-0 babel-preset-stage-1 babel-preset-stage-2 babel-preset-stage-3 --save-dev
npm install babel-plugin-transform-runtime -save-dev這個插件的做用是支持es7特性
修改配置文件

module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader"
                    }
                ]
            }
        ]
    }

建立.babelrc文件

{
  "presets": [
    "es2015",
    "react",
    "stage-0",
    "stage-1",
    "stage-2",
    "stage-3"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

處理css文件引用的加載器

npm install style-loader css-loader -save-dev
修改配置文件

// 處理在js中引用css文件
{
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
},

處理scss或者less文件引用的加載器

npm install sass-loader less-loader node-sass -save-dev
修改配置文件

// 處理在js中引用scss文件
{
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader'],
},

處理圖片引用的加載器

npm install url-loader file-loader -save-dev
修改配置文件

// 處理圖片操做  25000bit ~3kb
{
    test: /\.(png|jpg|jpeg|gif)$/,
    use: 'url-loader'
},

處理字體文件引用的加載器

npm install url-loader file-loader -save-dev
修改配置文件

// 處理字體文件
{
    test: /\.(eot|woff|ttf|woff2|svg)$/,
    use: 'url-loader'
}

處理瀏覽器兼容前綴

npm install postcss-loader autoprefixer -save-dev
修改配置文件

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader!postcss-loader"
    })
},
// 處理在js中引用scss文件
{
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader!postcss-loader!sass-loader"
    })
},
{
    test: /\.less$/,
    use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader!postcss-loader!less-loader"
    })
},

新建postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')({browsers:'last 2 versions'})
  ]
}

處理統一風格管理

npm install eslint-loader -save-dev
修改配置文件

// 這個只是加載器部分的寫法，具體使用請看eslint文檔
{
    enforce: "pre",
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "eslint-loader",
    options:{
        configFile:'.eslintrc.js'
    }
},

處理vue文件

npm install vue-loader -save-dev
修改配置文件

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        loaders: {
            js: [
                    'babel-loader',
                    {
                        loader: "eslint-loader",
                        options: {
                            configFile: '.eslintrc.js'
                        }
                    }
            ],
            css: 'style-loader!css-loader'
        }
    }
},

發佈策略

簡單的說就是將開發階段的配置文件複製一份到部署的配置文件中，而後刪刪改改就能夠了
把熱更新插件刪除，devServer屬性刪除
修改圖片處理和字體處理加載器

// 處理圖片操做  25000bit ~3kb
{
    test: /\.(png|jpg|jpeg|gif)$/,
    use: 'url-loader?limit=25000&name=images/[name].[ext]'
},
// 處理字體文件
{
    test: /\.(eot|woff|ttf|woff2|svg)$/,
    use: 'url-loader?limit=100000&name=fonts/[name].[ext]'
}

接下來運行npm run publish就發佈了
不過要注意全部的css，js，圖片都構建到一個bundle.js文件中了

Plugins（插件）

在真正構建以後作一些後處理操做就叫插件

刪除插件

npm install clean-webpack-plugin -save-dev
使用

var CleanPlugin = require('clean-webpack-plugin');

plugins: [
    // 刪除文件夾的插件
    new CleanPlugin(['dist'])
]

抽取公共js插件

使用

entry: {
        app: path.resolve(__dirname, 'src/js/app.js'),
        vendors: ['vue','vue-router','vuex']
    },


plugins: [
    // 分離第三方應用的插件
    new webpack.optimize.CommonsChunkPlugin({name: 'vendors', filename: 'vendors.js'}),
]

提取樣式文件插件

npm install extract-text-webpack-plugin@4.4.4 -save-dev注意下載2.x版本
使用

// 一、抽取css的第三方插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");

// 二、處理在js中引用css文件
{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader"
    })
},
// 處理在js中引用scss文件
{
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader!sass-loader"
    })
},

//三、加一個插件
plugins: [
    // 刪除文件夾的插件
    new ExtractTextPlugin("app.css"),
]

自動生成html插件

npm install html-webpack-plugin -save-dev
在根目錄建立template.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>webpack學習</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

修改配置文件

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

plugins: [
    // 自動生成html插件
   new HtmlWebpackPlugin({
       template: './src/template.html',
       htmlWebpackPlugin: {
           "files": {
               "css":["app.css"],
               "js": ["vendors.js", "bundle.js"]
           }
       },
       minify: {
           removeComments: true,
           collapseWhitespace: true,
           removeAttributeQuotes: true
       }
   }),
]

壓縮插件

修改配置文件

plugins: [
   // 壓縮混淆js代碼插件
   new webpack.optimize.UglifyJsPlugin({
       beautify: false,
       mangle: {
           screw_ie8: true,
           keep_fnames: true
       },
       compress: {
           warnings: false,
           screw_ie8: true
       },
       comments: false
   }),
]

定義生產環境插件

修改配置文件

plugins: [
  // 在構建的過程當中刪除警告
   new webpack.DefinePlugin({
       'process.env':{
           NODE_ENV:'"production"'
       }
   })
]

自動打開瀏覽器插件

npm install open-browser-webpack-plugin -save-dev
使用

// 自動打開瀏覽器插件
var OpenBrowserPlugin = require('open-browser-webpack-plugin')

plugins: [
    // 刪除文件夾的插件
   new OpenBrowserPlugin({url: 'http://localhost:8080/', browser: 'chrome'})
]

高級

和gulp的集成

npm install gulp del gulp-sequence -save-dev
編寫配置文件

// gulp的任務是控制執行流程，webpack的任務是處理複雜引用的依賴

var gulp = require('gulp');
// 刪除文件和目錄
var del = require('del');
// 按順序執行
var gulpSequence = require('gulp-sequence');
// 引入webpack的本地模塊
var webpack = require("webpack");
// 引入wbpack的配置文件
var webpackConfig = require("./webpack.publish.config.js");

gulp.task('default', ['sequence'], function () {
    console.log("項目構建成功");
});

// 流程控制
gulp.task('sequence', gulpSequence('clean','webpack'));

// 刪除文件和文件夾
gulp.task('clean', function (cb) {
    //del('dist);// 若是直接給dist的目錄，項目啓動的順序還有清除結果會報錯，因此要寫的更詳細一些
    del(['dist/*.js', 'dist/*.css', 'dist/images', 'dist/fonts,','dist/*.html']).then(function () {
        cb()
    });
});


//寫一個任務，在gulp中執行webpack的構建
// gulp 負責任務流程部分的操做，webpack負責複雜模塊系統的引用分離工做
gulp.task('webpack', function (cb) {
    // 執行webpack的構建任務
    webpack(webpackConfig, function (err, stats) {

        if (err) {
            console.log("構建任務失敗");
        } else {
            cb();
        }

    });
});

和eslint的集成

代碼的異步加載

修改配置文件

output: {
    publicPath:'/',
    chunkFilename: '[name]_[chunkhash:8]_chunk.js'
},

代碼中的寫法jquery

react

<Route path="movieDetail/:id"
       getComponent={
           (nextState, callback)=> {
               require.ensure([], (require)=> {
                   callback(null, require("../containers/MovieDetailContainer.js").default)
               }, "movieDetail")
           }
       }
/>

const MovieContainer= r => require.ensure([], () => r(require('../containers/MovieContainer.vue')),'movie')

組件庫按需加載處理

react中的antd按需加載配置

npm install babel-plugin-import -save-dev
// 修改babel配置文件
{
  "presets": ["es2015", "react","stage-0","stage-1","stage-2","stage-3"],
  "plugins": [
    ["import", { "libraryName": "antd","style": "css" }]
  ]
}

vue中的element按需加載配置

npm install babel-plugin-component-save-dev
// 修改babel配置文件
{
  "presets": [
    "es2015",
    "react",
    "stage-0",
    "stage-1",
    "stage-2",
    "stage-3"
  ],
  "plugins": [
    "transform-runtime",
    [
      "component",
      [
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-default"
        }
      ]
    ]
  ]
}

其餘

啓用source-map

如今的代碼是合併之後的代碼，不利於排錯和定位，只須要在config中添加

devtool: 'source-map',

output: {
    sourceMapFilename: '[name].map'
},

這樣出錯之後就會採用source-map的形式直接顯示你出錯代碼的位置。

加載jQuery plugin或者其餘legacy第三方庫

你的項目有時候會要加載各類各樣的第三方庫，好比一些jQuery的插件，它們都依賴jQuery，但若是直接引用就會報錯jQuery is not undefined這類的錯誤，由於一些老的庫不支持AMD或者CommonJS等一些先進的格式，因此有幾種方法解決

// plugin.js
(function ($) {
    const shade = "#556b2f";
    $.fn.greenify = function() {
        this.css( "color", shade );
        return this;
    };
}(jQuery));

方法一：webpack.ProvidePlugin

做用：把一個全局變量插入到全部的代碼中
修改配置文件

plugins: [
    //provide $, jQuery and window.jQuery to every script
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]

//這個也不須要了 由於$, jQuery, window.jQuery已經被注入到每個js中，均可以直接使用了
//import $ from 'jquery';
import './plugin.js';
...
myPromise.then((number) => {
  $('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>');
  //call our jquery plugin!
  $('p').greenify();
});

方法二：import-loader

npm install imports-loader --save-dev
修改配置文件

//注意這種寫法 咱們把jQuery這個變量直接插入到plugin.js裏面了
//至關於在這個文件的開始添加了 var jQuery = require('jquery');
import 'imports?jQuery=jquery!./plugin.js';

//後面的代碼同樣
myPromise.then((number) => {
  $('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>');
  //call our jquery plugin!
  $('p').greenify();
});

exports-loader

從模塊中導出變量的功能

// 直接綁定在全局變量window上面
// Hello.js
window.Hello = function(){
    console.log('say hello.');
}


//而後咱們在index.js文件裏去引用這個Hello.js:var hello = require('./Hello.js');。這樣引用的結果是變量hello是
//undefined。由於咱們在Hello.js文件裏沒有寫module.exports=window.Hello，因此index.js裏咱們require的結果就是
//undefined。這個時候，exports-loader就派上用場了。咱們只用把index.js的代碼稍微改動一下：var hello = require
//('exports?window.Hello!./Hello.js');，這個時候，代碼就能正確的運行了。變量hello就是咱們定義的window.hello啦。
//var hello = require('exports?window.Hello!./Hello.js');這行代碼，等於在Hello.js里加上一句module
//.exports=window.Hello，因此咱們才能正確的導入。

expose-loader

把一個模塊導出並付給一個全局變量

require("expose?libraryName!./file.js");
// Exposes the exports for file.js to the global context on property "libraryName".
// In web browsers, window.libraryName is then available


//例子中的註釋是說把file.js中exports出來的變量付給全局變量"libraryName"。假如file.js中有代碼module.exports=1，那麼
//require("expose?libraryName!./file.js")後window.libraryName的值就爲1（咱們這裏只討論瀏覽器環境）

resolve屬性

resolve: {
    //注意一下, extensions webpack2第一個不是空字符串! 對應不須要後綴的狀況.
    extensions: ['.js', '.json', '.sass', '.scss', '.less', 'jsx', '.vue'],
    //模塊別名定義，方便後續直接引用別名，無須多寫長長的地址
    alias: {
        'assets': path.resolve(__dirname, './src/assets'),
        'components': path.resolve(__dirname, './src/components')
    }
},

external屬性

// 配置了這個屬性以後 vue 和 vue-router這些第三方的包都不會被構建進 js 中，那麼咱們就須要經過 cdn 進行文件的引用了
//externals對象的key是給require時用的，好比require('vue'),，對象的value表示的是如何在global（即window）中訪問到該對象，這裏是window.Vue
externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter'
},

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。