webpack——一站到底一

時間 2019-12-10

標籤 webpack 到底简体版

原文原文鏈接

webpack入門

webpack在逐漸成爲一個成熟的青年路上，一直備受你們青睞，
然而還在不斷的健身，但願以最好的姿態呈現給各位，現在他已經v3。
比起1 、2又強化骨骼，變得更堅實。

1、什麼是webpack

官方給出：

Webpack 是前端資源模塊化管理和打包工具
他能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源
還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。

我的理解：

首先，webpack其實就是前端工程的模塊化打包工具
他能夠把複雜的程序細化爲細小的文件，而後在讓各個模塊進行加載
其次，天生支持commenjs，由於他就是在nodejs下開發的，但也支持AMD/CMD，方便舊代碼的遷移
而後，他能夠使得前端開發便捷，能夠代替gulp/grunt(接下來會寫到)，
好比打包壓縮、啓動server模塊熱替換、編譯sass less 以及css的抽離、
mock數據、版本控制、devtool源碼映射、以及開發、生產環境的切換
最後，webpack的擴展性強，插件機制完善，有效提升開發效率。

2、核心概念

入口 Entry
頁面中的入口文件，entry的值有三種類型：字符串、數組、對象css

一、字符串
       entry: './app.js'
   二、數組
       當存在多chrunks時，能夠採用數組的形式，好比第三方庫bootstrap
       {
         entry: ['./src/index.js', './vendors/bootstrap.js'],
         output: {
           path: './dist',
           filename: "index.js"
         }
       }
       會被打包到index.js中，可是數組的最後一個元素會被export
   三、對象
       設置多個打包的文件
           {   
               entry: {   
                   index: './src/index.js',  
                   header: './src/header.js'   
               } 
           }

出口 Outputhtml

指生成的文件要輸出的目錄， path、 filename
   output : {
       filename: '[name].js',
       path :__dirname + '/dev/scripts' //必須是絕對路徑 __dirname 指的是當前config.js路徑
   }
   若是加版本號的話
    filename ： '[name]@[chunk:6hash].js'
    注：版本號的配置有兩種方法，我會單獨寫一篇文章來介紹。。。

加載器 Loader
webpack自己只理解JavaScript，sass、css、html、jpg等文件須要loader進行處理，轉換爲模塊
經常使用的有:
babel-loader前端

用來編譯es6+ 
   一、下載：npm i babel-core babel-loader babel-preset-env -D
   注意之前用的是：npm i babel-core babel-loader babel-preset-es2015 babel-preset-state-0
   二、須要在項目根目錄建立.babelrc用來預設es6
   {
       "presets" : ["babel-preset-env"]
   }
   eg：
   三、{
       test: /\.js$/,
       exclude : /node_modules/,排除沒必要要的js解析
       use : [
           {
               loader : 'babel-loader',//解析es6解析具體經過babel-core
           }
       ]
   },

sass-loader、css-loader、style-loader
下載：npm i css-loader style-loader -D //css loadervue

npm i sass-loader node-sass -D  //編譯成css
     eg:
     // 加載css
     {
       test: /\.css$/,
       use: [
         { loader: 'style-loader' },
         { loader: 'css-loader' },//執行的時候從下往上執行
        {loader : 'sass-loader'}
       ]
     }
     sass-loader是編譯 sass文件爲css文件，css-loader是編譯css文件爲字符串，
     最後 style-loader把css字符串打入html文件的style標籤裏，讓頁面能加載樣式。

url-loader
下載：npm i url-loader -Dnode

圖片、字體圖標加載器，是對file-loader的上層封裝,
   支持base64編碼。傳入的size（也有的寫limit) 參數是告訴它圖片若是不大於 25KB 的話要自動在它從屬的 css 文件中轉成 BASE64 字符串。
file-loader: 
下載：npm i file-loader -D 
    加載一些 媒體文件 字體圖標等
    // 加載圖片
     {
       test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
       loader: 'url-loader',
       options: {
         limit: 1000,
         name: 'media/images/[name].[hash:7].[ext]'
       }
     },

     // 加載媒體文件
     {
       test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
       loader: 'url-loader',
       options: {
         limit: 10000,
         name: 'media/mp4/[name].[hash:7].[ext]'
       }
     },

     // 加載iconfont
     {
       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
       loader: 'url-loader',
       options: {
         limit: 10000,
         name: 'media/iconfont/[name].[hash:7].[ext]'
       }
     }

vue-loaderjquery

下載：npm i vue-loader -D    加載vue組件

postcss-loaderwebpack

css3加瀏覽器前綴

插件 Pluginscss3

插件能夠幫助webpack進行輸出文文件

經常使用的插件有：
(1) html-webpack-plugin 它會在src目錄下自動生成一個index.htmles6

配置webpack.config.js中 
   var HtmlWebpackPlugin = require('html-webpack-plugin')
   在plugins : {
       //編譯html
       new HtmlWebpackPlugin({
           template : './src/index.html', //源文件
           filename : 'index.html'//目標文件
       })
   }
   注：webpack怎麼引入第三方的庫 例如jquery
   entry: {
       page: 'path/to/page.js',
       jquery: 'node_modules/jquery/dist/jquery.min.js'
   }
   new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'index.html',
       inject: true,
       chunks: ['jquery', 'page'] // 按照前後順序插入script標籤
    })

(2) autoprefixer 自動檢測各個瀏覽器加個內核前綴的插件web

安裝：cnpm install --save-dev autoprefixer postcss-loader
  配置：
  var autoprefixer = require('autoprefixer');
   loaders:[
       {
         test:/\.css$/,
         //在原有基礎上加上一個postcss的loader就能夠了
         loaders:['style-loader','css-loader','postcss-loader']
         }
     ]
 },
 postcss:[autoprefixer({browsers:['last 2 versions']})]

(3) extract-text-webpack-plugin 將app.js裏的css抽離成.css

裝包 npm i extract-text-webpack-plugin -D
 一、var ExtractTextPlugin = require("extract-text-webpack-plugin")
  二、 配置插件 在module中
   module : {
       ...
       plugins : [
           //new 插件的實例
           new ExtractTextPlugin({
               filename : 'style/app.css'
           })
       ]
   }
  三、 對scss進行改造
   {
       test : /\.scss$/,
       use : [
           //css抽離
           ExtractTextPlugin.extract({
               fallback :'style-loader',  //style-loader是把文本放到頁面上
               use : ['css-loader','sass-loader']  //從後往前執行
           })
       ] 
   }
   若是

(4)webpack.optimize.UglifyJsPlugin 代碼壓縮
內置核心插件和 uglifyjs-webpack-plugin 這個插件同樣

var webpack = require('webpack')
   在plugins中
   plugin ： {
       ...
       new webpack.optimize.UglifyJsPlugin({
           compress{
               warings:false    //去掉警告
           }, 
           output:{
               comments:false 
           }
       })
   }

(5) open-brower-webpack-plugin 自動在瀏覽器中打開頁面方便開發

下載：npm i open-browser-webpack-plugin -D
   var OpenBrowser = require('open-brower-webpack-plugin')

   plugins : [
       ...
       new OpenBrowser({
           url ： 'http://localhost:4000'
       })
   ]

(6) on-build-webpack 刪除以前版本

下載：npm install --save-dev on-build-webpack
   //webpack.config.js
   var WebpackOnBuildPlugin = require('on-build-webpack');
   var fs = require("fs");
   //設置爲你的目標文件夾地址
   var buildDir = './dist/';
   ...
   plugin:[
       new WebpackOnBuildPlugin(function(stats) {
           const newlyCreatedAssets = stats.compilation.assets;
           const unlinked = [];
           fs.readdir(path.resolve(buildDir), (err, files) => {
             files.forEach(file => {
               if (!newlyCreatedAssets[file]) {
                 fs.unlink(path.resolve(buildDir + file));
                 unlinked.push(file);
               }
             });
             if (unlinked.length > 0) {
               console.log('刪除文件: ', unlinked);
             }
         });    
       })
   ]
續...webpack二——一站到底

相關標籤/搜索

每日一句

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