webpack、webpack-dev-server安裝和配置

webpack是近期最火的一款模塊加載器兼打包工具，它能把各類資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都做爲模塊來使用和處理。

全局安裝webpack和webpack-dev-server

咱們常規直接使用 npm 的形式來安裝：

$ npm install webpack -g

固然若是常規項目仍是把依賴寫入 package.json 包去更人性化：

npm init       建立一個 package.json 文件
npm install webpack --save-dev     在當前目錄下安裝局域的 webpack

完成以上兩個步驟後，咱們的項目下有一個 package.json 文件，一個 node_modules 文件夾，咱們還須要一個 index.html 文件

假如我要把webpack安裝到myapp這個文件夾下，就要輸入一下命令

cd  myapp         #進入myapp文件夾
npm init           #建立package.json文件，這個文件記錄了一些項目的名稱版本和一些依賴
npm install webpack --save-dev    #安裝 webpack 依賴到本地項目中

安裝成後package.json文件打開應該是相似這個結構，就說明安裝成功了

{
  "name": "first-demo",
  "version": "1.0.0",
  "description": "this is my first-demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "guowenfh",
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^1.12.14"
  }
}

安裝webpack開發工具，簡單來講，webpack-dev-server就是一個小型的靜態文件服務器。使用它，能夠爲webpack打包生成的資源文件提供Web服務。

npm install webpack-dev-server --save-dev     #安裝webpack-dev-server到本地項目

安裝完webpack-dev-server後在命令行執行  webpack-dev-server    而後打開瀏覽器http://localhost:8080/ 就能夠看到效果了。修改代碼後直接刷新瀏覽器就能夠看到效果

若是想改完代碼自動刷新執行webpack-dev-server –inline  命令就能夠實現自動刷新

webpack-dev-server  --inline     #實現自動刷新

webpack經常使用的一些命令，你們應該瞭解下

webpack        # 執行一次開發的編譯
webpack -p    #來針對發佈環境編譯(壓縮代碼)
webpack --watch   #來進行開發過程持續的增量編譯(飛快地!)
webpack -d – to    #來生成 SourceMaps
webpack --colors    #顯示靜態資源的顏色

二. 配置

每一個項目下都必須配置有一個 webpack.config.js ，它的做用如同常規的 gulpfile.js/Gruntfile.js ，就是一個配置項，告訴 webpack 它須要作什麼。在根目錄新建一個 webpack.config.js 文

1)、 entry 是頁面入口文件配置，output 是對應輸出項配置（即入口文件最終要生成什麼名字的文件、存放到哪裏），其語法大體爲：

module.exports={
    entry: {
        page1: "./page1",
        //支持數組形式，將加載數組中的全部模塊，但以最後一個模塊做爲輸出
        page2: ["./entry1", "./entry2"]
    },
    output: {
        path: "dist/js/page",
        filename: "[name].bundle.js"
    }
}

該段代碼最終會生成一個 page1.bundle.js 和 page2.bundle.js，並存放到 ./dist/js/page 文件夾下。

module.exports = {
  entry: './main.js',      //入口文件
  output: {
    filename: 'bundle.js'  //打包以後的保存的文件
  }
};

原文來自：http://618cj.com/2016/07/15/webpack教程/

2)、resolve 指定能夠被 import 的文件後綴。好比 Hello.jsx 這樣的文件就能夠直接用 import Hello from 'Hello' 引用

module.exports={
  resolve: {
    //查找module的話從這裏開始查找
    root: 'E:/github/flux-example/src', //絕對路徑
    //自動擴展文件後綴名，意味着咱們require模塊能夠省略不寫後綴名
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
       AppStore : 'js/stores/AppStores.js',//後續直接 require('AppStore') 便可
      //'jquery': path.resolve(__dirname, '../src/assets/jQuery-2.1.4.min')
      //'bootstrap': path.resolve(__dirname, './static/js/bootstrap.min')
    }
  },
}

 

3)、module.loaders 是最關鍵的一塊配置。它告知 webpack 每一種文件都須要使用什麼加載器來處理：

module.exports={
    module: {
        //加載器配置
        loaders: [
            //.css 文件使用 style-loader 和 css-loader 來處理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //.js 文件使用 jsx-loader 來編譯處理
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 來編譯處理
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //圖片文件使用 url-loader 來處理，小於8kb的直接轉爲base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    }
}

如上，"-loader"實際上是能夠省略不寫的，多個loader之間用「!」鏈接起來。

注意全部的加載器都須要經過 npm 來加載，並建議查閱它們對應的 readme 來看看如何使用。

拿最後一個 url-loader 來講，它會將樣式中引用到的圖片轉爲模塊來處理，使用該加載器須要先進行安裝：

npm install url-loader -save-dev

配置信息的參數「?limit=8192」表示將全部小於8kb的圖片都轉爲base64形式（其實應該說超過8kb的才使用 url-loader 來映射到文件，不然轉爲data url形式）。

 

webpack.config.js配置

var webpack =require("webpack");

module.exports = {
    devtool:"source-map",
    entry: {
        index:__dirname + "/src/index.js"
    }, //已屢次說起的惟一入口文件
    output: {
        path: __dirname + "/dist", //打包後的文件存放的地方
        filename: "[name].bundle.js",//打包後輸出文件的文件名
        publicPath:"/dist/"   //webpack output is served from

    },

    devServer: {
        inline:true,
        contentBase: "./",  //content not from webpack is serverd
        port: '8088',

        historyApiFallback: true,

            //配置服務器
        proxy:{
           '/v4/api/*': {
                  target: 'http://m.maizuo.com',
                  host: 'm.maizuo.com',
                  changeOrigin:true
              }
        }

        /*
          在前端 發起 /v4/api/billboard/home請求

                轉發到  http://m.maizuo.com/v4/api/billboard/home
         */
    },


    module:{
        loaders:[
         
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'//添加對樣式表的處理,內聯樣式
            },

            {
                test:/\.js$/, //隨便起的test 名字
                exclude: /node_modules/, //排除一個
                // exclude: /(node_modules|src)/, //*****排除多個怎麼寫？？？
                loader:'babel-loader',
                query:{
                    presets:['es2015','react']
                }
                
            },

            {
                test: /\.scss$/,
                loader:'style-loader!css-loader!sass-loader'
            },

            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader',
                options: {
                  name: 'fonts/[name].[ext]?[hash]' //目標文件夾
                }
            }, //添加對字體文件的支持。

            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                  name: 'img/[name].[ext]'
                }
                 //(1)將代碼中依賴的圖片資源複製到目標文件夾img/文件夾下面
                 //(2)自動更新靜態url地址(根據publicPath)。
            }
            
        ]
    },

    plugins:[
        // new webpack.optimize.UglifyJsPlugin({
        //   output: {
        //     comments: false,  // 移除全部的註釋
        //   },
        //   compress: {
        //     warnings: false
        //   }
        // })
    ]    
}

webpack模塊參數詳細說明：https://www.mmxiaowu.com/article/58482332d4352863efb55465

 webpack.config.js 配置舉例     http://ant-tool.github.io/webpack-config.html