webpack配置教程

一、npm腳本運行webpack與命令行輸入webpack的區別  : http://www.javashuo.com/article/p-sysafneo-eh.htmlcss

   npm 模塊的 安裝 和 卸載  : https://blog.csdn.net/yihanzhi/article/details/75665959html

   npm命令中,--save--dev --save的區別  : https://blog.csdn.net/tjcjava/article/details/69257848 (只是在package.json中位置不同,其餘的沒有區別。nodejs運行是根據依賴樹執行的,與package.json位置無關。若是每次安裝都是npm install就更是徹底沒有區別)java

二、(bug)webpack@3.12.0版本,在命令行直接使用webpack就能夠順利打包,使用npm run webpack提示錯誤 : node

  暫時不知道什麼緣由,從新安裝 或者 換一個版本(好比 webpack@3.5.6)就沒有這個問題了。react


 

下面的參考:https://www.jianshu.com/p/90e1049a5677webpack

三、生成Source Maps  : git

module.exports = {
  devtool: 'eval-source-map',  // 這裏配置下就能夠
  entry:  __dirname + "/app/main.js",
  output: {}
}

四、使用webpack構建本地服務器 : 安裝包  webpack-dev-serveres6

  devServer: {
    contentBase: "./public",//本地服務器所加載的頁面所在的目錄
    historyApiFallback: true,//不跳轉
    inline: true,//實時刷新
    host: "192.168.0.232", //本機的局域網ip //默認 域名:localhost ; 端口:8080
    open: true //是否運行成功後直接打開頁面
  }

注意:webpack版本與webpack-dev-server版本有兼容問題的。github

五、模塊 — js轉碼器(Babel ) :(webpack.config.js文件配置不少項時,配置文件會特別複雜。因此 babel的配置選項 能夠放在一個單獨的名爲 ".babelrc" 的配置文件中web

核心的兩個包:

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

注意:babel-core 版本與 babel-loader 版本有兼容問題的。(親測,兩個都是最新包都出現不兼容的問題,根據提示babel-core@6.* 和 babel-loader@7.*兼容使用)

  a、es6 轉碼器 : 安裝包   babel-preset-env

  module: {
    rules: [ // webpack2.x 以後, 被  代替,參考https://www.jianshu.com/p/11e52308421f
      {
        test: /\.js$/, // 匹配.js文件
        //排除也就是不轉換node_modules下面的.js文件
        exclude: /(node_modules|bower_components)/,
        use:[{
          //加載器 
          loader: "babel-loader"
        }]
      }
    ]
  }loadersrules

  b、JSX 轉碼器 : 安裝包   babel-preset-react

六、模塊 — css轉碼器 : (其餘的配置,參考 https://www.jianshu.com/p/90e1049a5677

核心的兩個包:

css-loader  使你可以使用相似@import 和 url(...)的方法實現 require()的功能。
style-loader 將全部的計算後的樣式加入頁面中。

npm install --save-dev css-loader style-loader
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配.js文件
        //排除也就是不轉換node_modules下面的.js文件
        exclude: /(node_modules|bower_components)/,
        use:[{
          //加載器 
          loader: "babel-loader"
        }]
      },
      { // 這裏配置這兩個工具
        test: /\.css$/,
        use: [ // 請注意這裏對同一個文件引入多個loader的方法。
            {
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }
        ]
      }
    ]
  }

  a、CSS預處理器

七、 插件(Plugins)— 根據html文件生成html文件: http://www.javashuo.com/article/p-pdhrzmke-be.html

npm install html-webpack-plugin --save-dev
  // 配置插件
  plugins: [
      // new webpack.BannerPlugin('版權全部,翻版必究')
      new htmlWebpackPlugin({
        filename:'index.html', //經過模板生成的文件名
        template:'index.html',//模板路徑
        inject:true, //是否自動在模板文件添加 自動生成的js文件連接
        title:'這個是WebPack Demo',
        minify:{
            removeComments:true, //是否壓縮時 去除註釋
            // collapseWhitespace: true,
            // removeAttributeQuotes: true
        }
    })
  ]

  

所有代碼:

const webpack = require('webpack'); // 引入webpack

var htmlWebpackPlugin=require('html-webpack-plugin');

module.exports = {
  // source-map
  devtool: 'source-map',
  // 文件人口、存放
  entry: __dirname + "/app/main.js",//已屢次說起的惟一入口文件
  output: {
    path: __dirname + "/public",//打包後的文件存放的地方
    filename: "bundle.js"//打包後輸出文件的文件名
  },
  // 本地服務器
  devServer: {
    contentBase: "./public",//本地服務器所加載的頁面所在的目錄
    historyApiFallback: true,//不跳轉
    inline: true, //實時刷新
    host:'localhost',
    port:9900
  },
  // 模塊
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配.js文件
        //排除也就是不轉換node_modules下面的.js文件
        exclude: /(node_modules|bower_components)/,
        use:[{
          //加載器 
          loader: "babel-loader"
        }]
      },
      { // 這裏配置這兩個工具
        test: /\.css$/,
        use: [ // 請注意這裏對同一個文件引入多個loader的方法。
            {
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }
        ]
      }
    ]
  },
   // 配置插件
   plugins: [
    // new webpack.BannerPlugin('版權全部,翻版必究')
    new htmlWebpackPlugin({
      filename:'index.html', //經過模板生成的文件名
      template:'index.html',//模板路徑
      inject:true, //是否自動在模板文件添加 自動生成的js文件連接
      title:'這個是WebPack Demo',
      minify:{
          removeComments:true, //是否壓縮時 去除註釋
          // collapseWhitespace: true,
          // removeAttributeQuotes: true
      }
    })
  ]
}
View Code

 八、webpack 處理 html 模塊:https://blog.csdn.net/connie_0217/article/details/79747137 或 http://www.javashuo.com/article/p-pdhrzmke-be.html (推薦)

  說明:webpack的人口文件是 js文件,根據依賴關係打包的。html 的打包是在 插件中處理的。

九、本身 配置的的webpack 項目框架。  https://github.com/kevin3623/webpack  


 webpack多頁應用腳手架 :https://www.jianshu.com/p/eadea5d27f0c

說明:這裏eslint規則(能夠根據須要關閉對應的 規則)

  a、做者使用的是Linux系統,因此eslint會報錯。解決方法:https://yq.aliyun.com/ziliao/572681

  b、強制在對象和數組文字中一致地使用尾隨逗號。修改方法:https://cloud.tencent.com/developer/section/1135595

(不推薦本身配置 腳手架)

相關文章
相關標籤/搜索