webpack2.0如何搭建前端項(xiàng)目

這篇文章主要介紹了webpack2.0如何搭建前端項(xiàng)目，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、什么是webpack:

webpack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。

注意： 目前最新為webpack2.0版本，與1.0有一些出入

二、初始化項(xiàng)目

npm init

npm install webpack --save-dev

三、安裝loader，stylus以及postCss

npm install style-loader css-loader stylus-loader stylus --save-dev
npm install --save-dev postcss-loader autoprefixer

四、目錄結(jié)構(gòu)大致如下

五、添加webpack.config.js 配置如下：

// 該配置基于webpack2.0 詳情查看 https://webpack.js.org/guides/migrating/
const path = require('path'); // 導(dǎo)入路徑包

module.exports = {
 entry: './src/main.js', //入口文件
 output: {
 path: path.resolve(__dirname, 'build'), // 指定打包之后的文件夾
　　　　 // publicPath: '/assets/', // 指定資源文件引用的目錄，也就是說(shuō)用/assests/這個(gè)路徑指代path，開(kāi)啟這個(gè)配置的話，index.html中應(yīng)該要引用的路徑全部改為'/assets/...'
 // filename: 'bundle.js' // 指定打包為一個(gè)文件 bundle.js
 filename: '[name].js' // 可以打包為多個(gè)文件
 },
 // 使用loader模塊
 module: {
 /* 在webpack2.0版本已經(jīng)將 module.loaders 改為 module.rules 為了兼容性考慮以前的聲明方法任然可用，
　　　　　　同時(shí)鏈?zhǔn)絣oader(用!連接)只適用于module.loader，
　　　　　　同時(shí)-loader不可省略 */
 rules: [{
  test: /\.css$/,
  use: [
  'style-loader', {
   loader: 'css-loader',
   options: {
   // modules: true // 設(shè)置css模塊化,詳情參考https://github.com/css-modules/css-modules
   }
  }, {
   loader: 'postcss-loader',
   // 在這里進(jìn)行配置，也可以在postcss.config.js中進(jìn)行配置，詳情參考https://github.com/postcss/postcss-loader
   options: {
   plugins: function() {
    return [
    require('autoprefixer')
    ];
   }
   }
  }
  ]
 }, {
  test: /\.styl(us)?$/,
  use: [
  'style-loader', 'css-loader', {
   loader: "postcss-loader",
   options: {
   plugins: function() {
    return [
    require('autoprefixer')
    ];
   }
   }
  }, 'stylus-loader'
  ]
 }]
 }
}

在index.html中引入'/build/main.js'。main.js 代碼如下

require('./common/css/style.css'); require('./common/css/stylus.styl');

六、通過(guò)webpack-dev-server實(shí)現(xiàn)頁(yè)面的自動(dòng)刷新。

首先安裝webpack-dev-server

npm install --save-dev webpack-dev-server

然后修改package.json配置文件中：

"scripts": {
 "start": "webpack-dev-server",
 "build": "webpack"
 }

使用npm start 啟動(dòng)服務(wù)。npm的 start是一個(gè)特殊的腳本名稱，它的特殊性表現(xiàn)在，在命令行中使用npm start就可以執(zhí)行相關(guān)命令，如果對(duì)應(yīng)的此腳本名稱不是start，想要在命令行中運(yùn)行時(shí)，需要這樣用npm run {script name} ，所以打包命令修改為npm run build 。

這里如果使用webpack-dev-server 命令來(lái)啟動(dòng)就必須全局安裝 devServer:

npm install webpack-dev-server -g

在webpack的配置文件中可以對(duì)devServer進(jìn)行配置

// 配置devServer各種參數(shù)
 devServer: {
 contentBase: "./", // 本地服務(wù)器所加載的頁(yè)面所在的目錄
 historyApiFallback: true, // 不跳轉(zhuǎn)
 inline: true // 實(shí)時(shí)刷新
 }

此時(shí)可以監(jiān)聽(tīng)入口文件的改變，實(shí)時(shí)刷新頁(yè)面，然而非入口文件的改變則不會(huì)被監(jiān)聽(tīng)到，需要手動(dòng)進(jìn)行刷新。并且目標(biāo)文件不包括index.html。這里使用html-webpack-plugin插件。

 npm install html-webpack-plugin --save-dev

修改webpack配置文件，添加以下配置：

...
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 ....,
 plugins: [
 new HtmlWebpackPlugin({
  template: './index.html' // 模版文件
 })
 ]
}

這里記錄一下遇到的坑：首先，devServer其實(shí)讀取的是打包之后的文件，但是這些文件是存儲(chǔ)在內(nèi)存當(dāng)中（并不會(huì)顯示在build下）。然后由于使用HtmlWebpackPlugin這個(gè)插件，它可以自動(dòng)幫你將打包的js插入模版html文件中，因此我們要將原文件（就是作為模版的index.html文件）中插入的main.js這行代碼去掉。然后如果開(kāi)啟了publicPath這個(gè)選項(xiàng)，HtmlWebpackPlugin會(huì)插入publicPth選項(xiàng)的路徑（'/assets/main.js'），devServer的index.html此時(shí)是無(wú)法讀取到該目錄下的文件。但是奇怪的是devServer此時(shí)直接沒(méi)有插入該scripts。。不知道為啥。。但是為了部署的問(wèn)題，cdn啥的，對(duì)開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境應(yīng)該開(kāi)啟不同的publicPath，也就是說(shuō)開(kāi)發(fā)和生產(chǎn)應(yīng)該使用兩個(gè)不同的配置文件（包括sourcemap，devserver都不應(yīng)該出現(xiàn)在生產(chǎn)的配置中）。

七、sourcemap 讓開(kāi)發(fā)更易于調(diào)試

module.exports = {
 devtool: 'eval-source-map',//配置生成Source Maps，選擇合適的選項(xiàng)
 ....
 }
}

八、使用ES6語(yǔ)法

webpack2.0增加了對(duì)ES6模塊的支持，無(wú)需額外的配置，并且可以與 AMD 和 CommonJS混用。webpack 2可以分析理解所有的ES6代碼并且只在檢測(cè)到是ES6模塊時(shí)才使用tree-shaking。然而，只有import導(dǎo)入和export導(dǎo)出的模塊才會(huì)被編譯為ES5，如果希望所有的打包文件都編譯為ES5，你需要使用一個(gè)轉(zhuǎn)譯器來(lái)處理剩下來(lái)的文件。這里我使用babel。首先安裝babel：

npm install --save-dev babel-core babel-loader babel-preset-es2015

在根目錄下添加.babelrc文件，并添加配置

如果bable的配置仍然為：

{
 presets: ['es2015']
}

那么無(wú)用的代碼也會(huì)被打包（Babel會(huì)將ES 6模塊通過(guò)commonJs模塊轉(zhuǎn)換輸出，然后webpack 2就不能進(jìn)行tree-shaking分析了）。這塊兒大致原理是這樣的。。。

因此我們將配置文件改為：

{
 "presets": [
  ["es2015", {"modules": false}]
 ]
}

并且在webpack的配置文件中加入如下loader（此處一定不能用use，不知道為啥）

{
 test: /\.js$/,
 loader: 'babel-loader', //此處不能用use，不知道為啥
 exclude: /node_modules/ //需要排除的目錄
}

九、熱加載模塊（HMR）

webpack配置文件中，devServer的“inline”選項(xiàng)會(huì)為入口頁(yè)面添加“熱加載”功能，“hot”選項(xiàng)則開(kāi)啟“熱替換（Hot Module Reloading）”，即嘗試重新加載組件改變的部分（而不是重新加載整個(gè)頁(yè)面）。如果兩個(gè)參數(shù)都傳入，當(dāng)資源改變時(shí)，webpack-dev-server將會(huì)先嘗試HRM（即熱替換），如果失敗則重新加載整個(gè)入口頁(yè)面。要使用HRM，首先需要在webpack配置文件中配置plugin：

 plugins: [
  ...
  new webpack.HotModuleReplacementPlugin() // 熱加載插件
 ]

到這一步，實(shí)際上改變css可以實(shí)現(xiàn)hrm，然而js只會(huì)刷新整個(gè)頁(yè)面，index.html直接不刷新了。。。不知道為啥。react可以通過(guò)react-transform-hrm來(lái)搞定。非react框架現(xiàn)在考慮用webpack-dev-middleware 來(lái)嘗試一下

十、生產(chǎn)環(huán)境

 通過(guò)以上步驟基本的開(kāi)發(fā)環(huán)境就搭建完畢了，那么實(shí)際上在生產(chǎn)環(huán)境里可能會(huì)有其他的要求，例如分離js與css（目前css是打包到j(luò)s中去的），例如壓縮代碼等。

首先創(chuàng)建一個(gè)webpack.production.config.js,然后在package.json中配置修改為：

"scripts": {
 "start": "webpack-dev-server",
 "build": "set NODE_ENV=production&&webpack --config ./webpack.production.config.js"
 }

當(dāng)運(yùn)行 npm run build 的時(shí)候，會(huì)設(shè)置環(huán)境變量"NODE_ENV"為"production"。

var prod = process.env.NODE_ENV === 'production' ? true : false;

現(xiàn)在分別介紹幾個(gè)常用的插件：

      1.提取公共模塊插件（webpack內(nèi)置） CommonsChunkPlugin

      2.壓縮js插件（webpack內(nèi)置） UglifyJsPlugin

      3.分離css文件： ExtractTextPlugin 注意該插件由于和webpack2不兼容，需要指定版本。。在webpack.production.config.js 中的配置，注意與1.x版本loader的寫(xiě)法不同。

      4.清除文件夾： clean-webpack-plugin

運(yùn)用[hash]使得產(chǎn)生的文件名帶有哈希值，合理使用緩存。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“webpack2.0如何搭建前端項(xiàng)目”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!