webpack入門筆記

參考鏈接https://segmentfault.com/a/1190000006178770

 

一.環境

1.node.js v8.4.0 

2.新建項目及文件夾結構

webpack-hello3

　　app //項目程序文件夾

　　　　images //圖片文件夾

　　　　index.tmpl.html //項目啓動界面模板，依據該模板生成正真的項目啓動頁面index.html

　　　　main.js //項目的惟一入口程序，也是啓動程序

       build //存放編譯（打包）後的文件夾

　　

 

3. npm init      //在改文件夾下運行 (生成一個包管理文件package.json)

4. npm install --save-dev webpack //安裝webpack

5.package.json文件中配置命令

{

　　"scripts": {

　　　　"test": "echo \"Error: no test specified\" && exit 1",

　　　　"start": "webpack", //運行打包 （npm start 或 npm run start ）

　　　　"server": "webpack-dev-server --open" //運行本地服務 （npm run server ，在瀏覽器中運行項目）

　　},

}

 npm的start命令是一個特殊的腳本名稱，其特殊性表如今，在命令行中使用npm start就能夠執行其對於的命令，若是對應的此腳本名稱不是start，想要在命令行中運行時，須要這樣用npm run {script name}如npm run build

其中 打包和編譯的區別，打包是安裝打包配置把js進行打包輸出，編譯是安裝編譯配置把ts等代碼文件編譯成.js文件，或對代碼進行壓縮，優化等。

 

 

二.配置文件及運行本地服務

1.在webpack-hello3文件夾根目錄下新建webpack.config.js文件

2.編輯配置文件

module.exports = {

　　

　　entry: __dirname + "/app/main.js",//已屢次說起的惟一入口文件

　　

　　output: {

　　　　path: __dirname + "/build",//打包後的文件存放的地方

　　　　filename: "bundle.js"//打包後輸出文件的文件名

　　},

 

　　devServer: {

　　　　contentBase: "./public",//本地服務器所加載的頁面所在的目錄

　　　　historyApiFallback: true,//不跳轉

　　　　inline: true//實時刷新

　　},

 

 

}

 

關於打包成多個js文件的配置

    /*
    * 這樣配置全部的js文件都會打包在一個bundle.js文件中
    * 此時 index.html引用
    * <script src="bundle.js"></script>
    entry:__dirname+"/app/main.js", //程序惟一入口文件,
    output:{
        path:__dirname+"/public",//打包後文件存放的地方
        filename:"bundle.js"//打包後輸出文件的文件名
    },
     
    */


    /*
    * 要把各js文件分多個文件打包時，須要這樣配置
    * 此時 index.html引用
    * <script src="main.js"></script>
    * <script src="gr.js"></script>
    */
    entry:{
        main:__dirname+"/app/main.js", //main 表示程序惟一入口文件
        gr:[__dirname+"/app/Greeter.js"] //這個能夠把多個js文件合併成一個gr.js
    },
    output:{
        path:__dirname+"/public",//打包後文件存放的地方
        filename:"[name].js" //這樣會分別生成main.js和 gr.js 兩個文件
    },

 

 

三.Babel

Babel實際上是一個編譯JavaScript的平臺，它能夠編譯代碼幫你達到如下目的：

• 讓你能使用最新的JavaScript代碼（ES6，ES7...），而不用管新標準是否被當前使用的瀏覽器徹底支持(如 import {} from './main.js') ；
• 讓你能使用基於JavaScript進行了拓展的語言，好比React的JSX；

// npm一次性安裝多個依賴模塊，模塊之間用空格隔開 ,

//babel-core babel核心包，babel-preset-env 解析Es6,babel-preset-react解析React的JSX

1.安裝babel

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

2.配置babel 

　　{

　　　　test: /(\.jsx|\.js)$/,

　　　　use: {

　　　　　　loader: "babel-loader",

　　　　　　options: {

　　　　　　　　presets: [

　　　　　　　　　　"env", "react"

　　　　　　　　]

　　　　　　}

　　　　},

　　　　exclude: /node_modules/

　　},

 

四.安裝react

npm install --save react react-dom

 

五.css

css-loader使你可以使用相似 @import和  url(...)的方法實現  require()的功能

style-loader將全部的計算後的樣式加入頁面中，兩者組合在一塊兒使你可以把樣式表嵌入webpack打包後的JS文件中。

1.安裝

npm install --save-dev style-loader css-loader

2.配置

{
      test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader", options: { modules: true } } ] }

六.圖片

引用形式

1.html文件中直接引用，如：<img src="a.jpg" />

 2.css中，如：.body{background:url(a.jpg)}

3.js中，如：var img = '<img src="a.jpg" />'; document.body.innerHTML = img;

4.ReactJS中，如：render(){

　　　　　　　　　　return (<img src="a.jpg" />);

　　　　　　　　 }

 

webpack中引入圖片須要url-loader 這個加載器，而url-loader又依賴file-loader,

而html中的img標籤須要html-withimg-loader插件支持，因此須要安裝它們,

npm install --save-dev file-loader url-loader html-withimg-loader

 

 增長配置

{

　　test:/\.(png|jpg|gif)$/,

　　use:{

　　　　loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'

　　　　/*

　　　　loader:"url-loader",

　　　　options:{

　　　　　　limit:50,//圖片打包限制，當圖片小於50字節時自動轉換成base64編碼引用，大於50字節時打包

　　　　　　outputPath:'images/' //將打包後圖片放到指定文件夾

　　　　}*/

　　}

},

{

　　test:/\.html$/, //解析直接寫在html文件中<img>標籤

　　use:{

　　　　loader:'html-withimg-loader'

　　}

}

 

 

七.簡單優化

 1.分離第三方庫，如react

 2.分離js,css(既css單獨打包，由於webpack默認會把js,css打包到一個文件)

3.壓縮js代碼

 

 安裝css單獨打包插件

npm -save-dev extract-text-webpack-plugin

 

更改css配置

{

　　test: /\.css$/,

　　use:ExtractTextPlugin.extract({

　　　　fallback: "style-loader",

　　　　use: {

　　　　　　loader:"css-loader",

　　　　　　options:{

　　　　　　　　modules:true,//指定啓用css modules

　　　　　　　　localIdentName:'[name]__[local]--[hash:base64:5]' //指定css類名格式

　　　　　　}

　　　　}

　　})

},

 

 

plugins:[

　　//分離第三方庫，要放在前面

　　new webpack.optimize.CommonsChunkPlugin({name:"vendor",filename:"vendor.bundle.js"}),

　　new HtmlWebpackPlugin({

　　　　template: __dirname + "/app/index.tmpl.html"//new 一個這個插件的實例，並傳入相關的參數

　　}),

　　new webpack.optimize.OccurrenceOrderPlugin(),//根據模塊調用次數，給模塊分配ids，常被調用的ids分配更短的id，使得ids可預測，下降文件大小，該模塊推薦使用

　　new webpack.optimize.UglifyJsPlugin(),//壓縮js

　　new ExtractTextPlugin("style.css")//分離css

]