一、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 } }) ] }
八、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
說明:這裏eslint規則(能夠根據須要關閉對應的 規則)
a、做者使用的是Linux系統,因此eslint會報錯。解決方法:https://yq.aliyun.com/ziliao/572681
b、強制在對象和數組文字中一致地使用尾隨逗號。修改方法:https://cloud.tencent.com/developer/section/1135595
(不推薦本身配置 腳手架)