安裝 webpack

時間 2019-11-13

標籤安裝 webpack 简体版

原文原文鏈接

【 webpack3.0.0剛剛出來因此文章是跟着低版本教程操做熟悉結果好多對不上喔】css

什麼是webpack? 他有什麼優勢？html

首先對於不少剛接觸webpack人來講，確定會問webpack是什麼？它有什麼優勢？咱們爲何要使用它？帶着這些問題，咱們來總結下以下：前端

Webpack是前端一個工具，可讓各個模塊進行加載，預處理，再進行打包，它能有Grunt或Gulp全部基本功能。優勢以下：node

支持commonJS和AMD模塊。
支持不少模塊加載器的調用，能夠使模塊加載器靈活定製，好比babel-loader加載器，該加載器能使咱們使用ES6的語法來編寫代碼。
能夠經過配置打包成多個文件，有效的利用瀏覽器的緩存功能提高性能。
使用模塊加載器，能夠支持sass，less等處理器進行打包且支持靜態資源樣式及圖片進行打包。
更多等等。。。帶着這些問題咱們慢慢來學習webpack。

一：前提是必須安裝 nodejsreact

可經過cmd指令查看是否安裝node webpack

　　　　node --version 或者 node -vgit

　　　　path 可查看環境變量github

二：如何安裝和配置web

首先個人項目目錄結構是：文件名叫webpack，裏面只有一個main.html，代碼以下：正則表達式

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="src/react.min.js"></script>
 </head>
 <body>
    <div id="content"></div>
    <script src="build/build.js"></script>
 </body>
</html>

還有一個文件夾src，該文件夾存放了二個js文件；react.min.js源文件和main.js文件，main.js源碼以下：

/* 內容區模塊代碼 */
var ContentMode = React.createClass({
        render: function(){
            return (
                <div className="ContentMode">
                    <div class="contents">{this.props.contents}</div>
                    {this.props.children}
                </div>
            )
        }
});
/* 頁面div封裝 上面三個模塊 */
var Page = React.createClass({
    render: function(){
        return (
            <div className="homepage">
                <ContentMode  contents ="longen">this is one comment</ContentMode >
                <ContentMode  contents ="longen2">this is two comment</ContentMode >
            </div>
            )
        }
});
/* 初始化到content容器內 */
React.render(
       React.createElement(Page,null),document.getElementById("content")
);

該代碼是React.js代碼，是react.js入門學習一中的代碼複製過來的爲了演示；

安裝步驟以下：

生成package.json文件；

首先咱們須要在根目錄下生成package.json文件，須要進入項目文件內根目錄下執行以下命令：npm init

如上經過一問一答的方式後會在根目錄下生成package.json文件，以下所示：

2 . 經過全局安裝webpack

執行命令以下：npm install -g webpack 以下所示：

在c盤下會生成node_modules文件夾中會包含webpack，此時此刻咱們能夠使用webpack命令了；

3. 配置webpack

每一個目錄下都必須有一個webpack.config.js，它的做用就比如Gulpfile.js、或者 Gruntfile.js，就是一個項目配置，告訴webpack須要作什麼。

以下是個人webpack.config.js代碼以下：

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "build/build.js"
  },
  module: {
    loaders: [
       //.css 文件使用 style-loader 和 css-loader 來處理
      { test: /\.css$/, loader: "style!css" },
      //.js 文件使用 jsx-loader 來編譯處理
      { test: /\.js$/,    loader: "jsx-loader" }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  plugins: []
};

entry 是頁面中的入口文件，好比我這邊的入口文件時main.js

output: 是指頁面經過webpack打包後生成的目標文件放在什麼地方去，我這邊是在根目錄下生成build文件夾，該文件夾內有一個build.js文件；

resolve: 定義瞭解析模塊路徑時的配置，經常使用的就是extensions; 能夠用來指定模塊的後綴，這樣在引入模塊時就不須要寫後綴，會自動補全。

plugins: 定義了須要使用的插件，好比commonsPlugin在打包多個入口文件時會提取公用的部分，生成common.js;

module.loaders：是文件的加載器，好比咱們以前react須要在頁面中引入jsx的js源碼到頁面上來，而後使用該語法，可是經過webpack打包後就不須要再引入JSXTransformer.js；看到上面的加載器；好比jsx-loader加載器就是表明JSXTransformer.js的，還有style-loader和css-loader加載器；所以在使用以前咱們須要經過命令把它引入到項目上來；所以須要以下命令生成下；

jsx-loader加載器 npm install jsx-loader --save-dev 以下：

Style-loader加載器 npm install style-loader --save-dev 以下：

css-loader 加載器 npm install css-loader --save-dev 以下：

局部安裝webpack 執行命令：npm install webpack --save-dev

咱們這邊乾脆把gulp的全局安裝和在項目中局部安裝也安裝下，稍後有用~

Gulp全局安裝 npm install -g gulp 以下：

在項目文件內，gulp局部安裝使用命令 npm install gulp --save-dev 以下所示：

所以在咱們文件夾node_modules下生成文件以下：

如今咱們來執行命令 webpack; 以下所示：

便可在根目錄下生成一個build文件夾中build.js 以下所示：

咱們還能夠使用以下命令：webpack --display-error-details 命令執行，這樣的話方便出錯的時候能夠查看更詳盡的信息；好比以下：

如今咱們再來刷新下頁面；看到以下：

能夠看到頁面渲染出來了，咱們接着來看看頁面中的請求：

能夠看到只有一個文件react.min.js的源文件和build.js 咱們剛剛生成的build.js文件了，所以咱們經過webpack進行打包後，咱們如今就再也不須要和之前同樣引入JSXTransformer.js了。咱們還能夠看看build.js內生成了那些js，這裏就不貼代碼了，本身能夠看看了~

上面是使用webpack打包；如今咱們再來看看使用第二種方案來打包~

使用gulp來進行打包

咱們知道使用gulp來打包的話，那麼咱們須要在根目錄下須要新建 Gulpfile.js；

所以咱們這邊Gulpfile.js的源碼以下：

var gulp = require('gulp');
var webpack = require("gulp-webpack");
var webpackConfig = require("./webpack.config.js");

gulp.task('webpack', function () {
    var myConfig = Object.create(webpackConfig);
    return gulp
        .src('./src/main.js')
        .pipe(webpack(myConfig))
        .pipe(gulp.dest('./build'));
});

// 註冊缺省任務
gulp.task('default', ['webpack']);

而後webpack.config.js代碼變爲以下：

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "build.js"
  },
  module: {
    loaders: [
       //.css 文件使用 style-loader 和 css-loader 來處理
      { test: /\.css$/, loader: "style!css" },
      //.js 文件使用 jsx-loader 來編譯處理
      { test: /\.js$/,    loader: "jsx-loader" }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  plugins: []
};

便可，而後再在命令行中輸入gulp便可生成build/build.js了；以下所示：【可是啊我本身是輸入webpack才實現的！

Github上的代碼以下： https://github.com/tugenhua0707/webpack/ 本身能夠把壓縮包下載下來運行下便可。

回到頂部

三：理解webpack加載器

Webpack提供了一套加載器，好比css-loader,less-loader,style-loader，url-loader等，用於將不一樣的文件加載到js文件中，好比url-loader用於在js中加載png/jpg格式的圖片文件，css/style loader用於加載css文件，less-loader加載器是將less編譯成css文件；

配置加載器

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "build/build.js",
    path: __dirname + '/assets/',
    publicPath: "/assets/"
  },
  module: {
    loaders: [
      {test: /.css$/, loader: 'style!css'},
      {test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
  }
  resolve: {
extensions: ['', '.js', '.jsx'],
//模塊別名定義，方便後續直接引用別名，無須多寫長長的地址
alias: {
    a : 'js/assets/a.js',  // 後面直接引用 require(「a」)便可引用到模塊
    b : 'js/assets/b.js',
    c : 'js/assets/c.js'
}
  },
  plugins: [commonsPlugin, new ExtractTextPlugin("[name].css")]
}

module.loader: 其中test是正則表達式，對符合的文件名使用相應的加載器.

/.css$/會匹配 xx.css文件，可是並不適用於xx.sass或者xx.css.zip文件.

url-loader 它會將樣式中引用到的圖片轉爲模塊來處理; 配置信息的參數「?limit=8192」表示將全部小於8kb的圖片都轉爲base64形式。

entry 模塊的入口文件。依賴項數組中全部的文件會按順序打包，每一個文件進行依賴的遞歸查找，直到全部模塊都被打成包；

output：模塊的輸出文件，其中有以下參數：

filename: 打包後的文件名

path: 打包文件存放的絕對路徑。

publicPath: 網站運行時的訪問路徑。

relolve.extensions: 自動擴展文件的後綴名，好比咱們在require模塊的時候，能夠不用寫後綴名的。

relolve.alias: 模塊別名定義，方便後續直接引用別名，無須多寫長長的地址

plugins 是插件項;

未完待續：；；