webpack點滴
一個比較完整的webpack的配置，本身配置不斷更新。javascript
const path = require('path')
const configs = require('./configs/')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extract = new ExtractTextPlugin('css/[name].[hash].css')
const autoprefixer = require('autoprefixer')({ browsers: ['iOS >= 7', 'Android >= 4.1'] })
const IS_ENV = process.env.NODE_ENV == 'production'
const plugins = []
if (IS_ENV) {
plugins.push(new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}))
plugins.push(new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
}))
}
module.exports = {
target: 'web',
entry: {
main: ['babel-polyfill', './src/main.js']
},
output: {
filename: 'js/[name].[hash].js',
path: path.resolve(__dirname, `${configs.dest}static`),
publicPath: configs.publicPath
},
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader', 'eslint-loader']
},
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract({
use: ['css-loader'],
fallback: 'vue-style-loader'
}),
less: ExtractTextPlugin.extract({
use: ['css-loader', 'less-loader'],
fallback: 'vue-style-loader'
})
},
postcss: [autoprefixer]
}
},
'eslint-loader'
]
},
{
test: /\.css$/,
use: extract.extract([
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [autoprefixer]
}
}
])
},
{
test: /\.less$/,
use: extract.extract([
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [autoprefixer]
}
},
'less-loader'
])
},
{
test: /\.(eot|woff|svg|ttf|woff2|)(\?|$)/,
use: [
{
loader: 'file-loader',
options: {
name: 'iconfont/[name].[hash].[ext]'
}
}
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 2000,
name: 'images/[name].[hash].[ext]'
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src/template/index.html'),
filename: '../index.html',
title: configs.title,
hash: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
}
}),
extract
].concat(plugins),
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'configs$': path.resolve(__dirname, 'configs/base.js'), //程序的一些基本配置
'util$': path.resolve(__dirname, 'src/util/index.js'), //經常使用工具方法
'is-seeing$': path.resolve(__dirname, 'src/util/is-seeing.js'),
'pull-list$': path.resolve(__dirname, 'src/mixins/pull-list.js'), //拉取列表
'route-data$': path.resolve(__dirname, 'src/libs/route-data/index.js'), //頁面數據緩存
'stores': path.resolve(__dirname, 'src/stores/') //經常使用工具方法
},
extensions: ['.js', '.vue', '.json']
},
devtool: IS_ENV ? false : '#cheap-module-eval-source-map'
}
作一個對webpack配置最快的人，小範圍內最瞭解webpack的人。css
哈哈，這麼火的webpack，最近正好不忙，來體驗一下吧。html
http://blog.csdn.net/hongchh/article/details/55113751 vue
http://blog.csdn.net/kun5706947/article/details/52596766java
http://www.cnblogs.com/sloong/p/5826818.htmlreact
強力推薦 http://www.cnblogs.com/lvyongbo/p/5953464.htmljquery
關於熱加載能夠看的博客：http://www.tuicool.com/articles/BZrQ3mvwebpack
一個webpack中比較好的博客：http://www.cnblogs.com/LIUYANZUO/p/5184424.htmlgit
http://www.qdfuns.com/notes/42711/902335dd33c37cbf2ab81b3a4eb2c76b.html
webpack打包中externals的用法和缺陷。
https://zhuanlan.zhihu.com/p/21748318?refer=starkwang
webpack的優點
1. webpack 是以 commonJS 的形式來書寫腳本滴，但對 AMD/CMD 的支持也很全面，方便舊項目進行代碼遷移。
commonjs(同步的，一個單獨的文件就是一個模塊。加載模塊使用require方法，該方法讀取一個文件並執行，最後返回文件內部的exports對象)
//公有方法
function foobar () {
this.foo = function () {
// do someing ...
}
this.bar = function () {
//do someing ...
}
}
//exports對象上的方法和變量是公有的
var foobar = new foobar();
exports.foobar = foobar;
amd,AMD規範容許輸出模塊兼容CommonJS規範
例子一：
//經過數組引入依賴 ，回調函數經過形參傳入依賴
define(['someModule1', ‘someModule2’], function (someModule1, someModule2) {
function foo () {
/// someing
someModule1.test();
}
return {foo: foo}
});
例子二：
define(function (require, exports, module) {
var reqModule = require("./someModule");
requModule.test();
exports.asplode = function () {
//someing
}
});
cmd CMD推崇依賴就近，AMD推崇依賴前置
AMD的api默認是一個當多個用，CMD嚴格的區分推崇職責單一。例如：AMD裏require分全局的和局部的。CMD裏面沒有全局的 require,提供 seajs.use()來實現模塊系統的加載啓動。CMD裏每一個API都簡單純粹。
2. 能被模塊化的不只僅是 JS 了。
3. 開發便捷，能替代部分 grunt/gulp 的工做，好比打包、壓縮混淆、圖片轉base64等
4. 擴展性強，插件機制完善，特別是支持 React 熱插拔（見 react-hot-loader ）的功能讓人眼前一亮。
初步的安裝和學習：http://blog.csdn.net/kun5706947/article/details/52596766
http://www.tuicool.com/articles/BZrQ3mv
http://blog.csdn.net/github_26672553/article/details/52139023
http://www.wbc.com/Article/50764
webpack.config.js的配置
module.exports = { //entry: __dirname + "/app/main.js",//已屢次說起的惟一入口文件 //多個入口的加載 entry: { app: [ __dirname+'/app/main.js' ] }, output: { path: __dirname + "/public",//打包後的文件存放的地方 filename: "all.js"//打包後輸出文件的文件名 }, module: {//在配置文件裏添加JSON loader loaders: [ { test: /\.json$/, loader: "json" } ] }, devServer: { contentBase: "./public",//本地服務器所加載的頁面所在的目錄 historyApiFallback: true,//不跳轉 inline: true,//實時刷新 hot:true } }
package.json中
"scripts": {
"test": "webpack-dev-server --hot --inline"
}
-------------------------------------------------------------------------------------------------------
瀏覽器能夠從：http://localhost:8080/admin/或者http://localhost:8080/consumer/進入
[name]就表明了上邊的內容
=============================
下邊的都是本身躺過的坑。
4. 我在mac上使用的時候，須要注意--save-dev 咱們的save前兩個--，dev前一個-,若是寫錯了就能保存版本了。
cnpm install webpack-dev-server --save-dev
5.webpack.config.js 中應該寫babel-loader寫成了babel(有些博客亂說的)
6.package.json中有了webpack-dev-server其實就能夠不用webpack了。
7.在如下的版本中，只要在server的配置中寫一個inline就能夠實現熱加載。不須要再scripts後邊配置什麼--hot都行。
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
上面的版本我最近一次的測試結果中，inline:true 和--hot都不加，均可以實現不點擊刷新熱加載。
8.你會發現服務不能用ip訪問，只能用localhost訪問。啓動的時候添加--host 0.0.0.0
9.--open 啓動服務後，瀏覽器自動重啓一個頁面。默認打開index.html.
10.這是一個最最簡單的webpack-dev-server的服務的配置，目的爲了，咱們平時的例子中，須要使用服務器的時候，快速的導入這個文件而後，裝一個
webpack和webpack-dev-server 就可使用了。
package.json中須要修改的：
"test": "webpack-dev-server --hot --open"
安裝步驟：
1.------
cnpm init
2.------
package.json中須要修改的：
"test": "webpack-dev-server --hot --open"
3.------
cnpm install webpack --save-dev
4.------
cnpm install webpack-dev-server --save-dev
5.------
touch main.js webpack.config.js
若是沒有index.html新建html.
6.index.html中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script type="text/javascript" src="./all.js"></script> </head> <body> hello piaopiaoran! <script type="text/javascript"> </script> </body> </html>
7.webpack.config.js中
module.exports = { //entry: __dirname + "/app/main.js",//已屢次說起的惟一入口文件 //多個入口的加載 entry: { app: [ __dirname+'/main.js' ] }, output: { path: __dirname + "/",//打包後的文件存放的地方 filename: "all.js"//打包後輸出文件的文件名 }, module: {//在配置文件裏添加JSON loader loaders: [ { test: /\.json$/, loader: "json" } ] }, devServer: { contentBase: "./",//本地服務器所加載的頁面所在的目錄 historyApiFallback: true,//不跳轉 inline: true,//實時刷新 hot:true } }
8.
webpack圖片引入提示沒有對應模塊
https://segmentfault.com/q/1010000007664860
樓主遇到的問題多是 "include" 沒配置好。
上面引入失敗的圖片的路徑是 "libs/emoji/image/xxx.png"，但樓主的 loader 裏的 "include" 把 loader 的有效做用域限定在了 "libs/image" 目錄下，因此這個 loader 對上面的圖片是無效的。
能夠考慮把 "libs/emoji/image" 這個文件夾也加到 "include" 數組裏。
另外，按照樓主想要的效果，這裏應該用 url-loader 而不是 file-loader。
https://github.com/webpack/ur...
url-loader 的效果是對於小於 limit 的文件，以 "data url" 的方式引入；對於大於 limit 的文件，則自動改用 file-loader 進行引入。
9.webpack的img-webpack模塊報錯。
http://blog.csdn.net/cloudsben/article/details/8164047
20.webpack 加載css中含有圖片。
http://blog.csdn.net/github_26672553/article/details/52107165
21.在導入jackblog-vue中，咱們須要考慮的問題。
img-webpack-loader解析錯誤
img-webpack-loader從2升級到了三
而後我mac安裝了libpng
http://blog.csdn.net/cloudsben/article/details/8164047
而後更具提示安裝確實的包。
發現了 spawn ENOENT
https://segmentfault.com/q/1010000005845999
升級了NPM
mac 上裝 pngquant
http://www.tuicool.com/articles/UjAbuu
安裝了一堆以後我從新刪除了，而後又把 git上的配置拿下來，cnpm了一下就行了。
22. plugin 中的HtmlWebpackPlugin 這個表示html中的meta中的title，icon等。
var HtmlWebpackPlugin = require('html-webpack-plugin')
new HtmlWebpackPlugin({
favicon:path.join(__dirname,'src/favicon.ico'),
title: "Jackblog vue版",
template: path.join(__dirname,'src/index.html'),
inject: true
}),
23.extract-text-webpack-plugin 插件使用，把css獨立出來不打包到js中。
第一部：var ExtractTextPlugin = require('extract-text-webpack-plugin')
這個表示能夠直接用import './css/all.css'
上面的代碼運行救過就是壓縮後的css和js放在了同一個目錄下，咱們想讓css單獨放一個css目錄,須要實例化ExtractTextPlugin
這是第一步和第二步
補充代碼
//new ExtractTextPlugin('[hash:8].style.css', { allChunks: true })
//{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap' ) }
24.這個插件我暫時不知道有什麼做用。
new webpack.optimize.OccurenceOrderPlugin()
25.OccurenceOrderPlugin後來變爲OccurrenceOrderPlugin 多了一個r.
webpack.optimize.OccurrenceOrderPlugin()
26.
Error: Breaking change: ExtractTextPlugin now only takes a single argument. Either an options object *or* the name of the result file
這樣的錯誤表示的是,
http://blog.csdn.net/real_bird/article/details/54852500
這個博客只有在百度搜出來點進去能夠，直接點進去的話，會變樣的。
27. 監聽3000端口
listen EADDRINUSE :::3000
28.
webpack path和publicPath做用
path：用來存放打包後文件的輸出目錄
publicPath：指定資源文件引用的目錄
用處：例如在express中，指定了public/dist是網站的根目錄，網站的源文件存放在public中，那麼就須要設置path:」./dist」指定打包輸出到該目錄，而publicPath就須要設置爲」/」,表示當前路徑。
publicPath取決於你的網站根目錄的位置，由於打包的文件都在網站根目錄了，這些文件的引用都是基於該目錄的。假設網站根目錄爲public，引用的圖片路徑是’./img.png’，若是publicPath爲’/’，圖片顯示不了，由於圖片都打包放在了dist中，那麼你就要把publicPath設置爲」/dist」。
29. cross-env的使用方法。
功夫不負有心人，在萬能的google上，我找到了解決方法：cross-env。
這個迷你的包可以提供一個設置環境變量的scripts，讓你可以以unix方式設置環境變量，而後在windows上也能兼容運行。
使用方法：
-
安裝cross-env:
npm install cross-env --save-dev -
在
NODE_ENV=xxxxxxx前面添加cross-env就能夠了
30.
http://www.cnblogs.com/dreamless/p/6008362.html
爲了熱加載，咱們把須要的js html放置到內存中。
webpack使用webpack-dev-middleware進行熱重載
新手，剛開始學習webpack，想使用webdevserver，但定製性太差，因而研究了一下使用webpack-dev-middleware進行指定。 根據文檔https://www.npmjs.com/package/webpack-hot-middleware 須要配置entry和output. 常規配置 entry: ['./src/main.js'], output: { path: path.resolve(__dirname, 'dist/'), filename: '[name].[hash].js', }, 但在熱重載中，文件是不存放在硬盤上的，而是使用了memory-fs模塊存放在內存中的，所以原始規則不能使用了。 查看與webpack-dev-middleware配合須要使用到webpack-hot-middleware，在內存中使用時須要爲入口文件添加一個'webpack-hot-middleware/client'， 同時輸出的文件也和原來不一樣，文件再也不帶有根目錄，所以，Path和publicpath均須要修改，結果以下： entry: { app:[ 'webpack-hot-middleware/client', './src/main.js' ], }, output: { path: '/', // publicPath: '/' }, 同時還須要添加相應的熱重載插件： plugins: [ // Webpack 1.0 new webpack.optimize.OccurenceOrderPlugin(), // Webpack 2.0 fixed this mispelling // new webpack.optimize.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ] 至此Js文件的生成已經完成了，但缺乏Html,同樣不能訪問，須要使用'html-webpack-plugin'處理Html文件，複製到內存中。
31.
http://www.cnblogs.com/y896926473/articles/6011711.html
32.babel的使用。
在一個單獨的文件夾中：
註釋：能夠在loaders中配置query參數來替代.babelrc
（1）須要這一些文件。
.babelrc
{ "presets": [ ["es2015"] ] }
cnpm install babel-preset-es2015 -g
cnpm install babel-preset-es2015 --save-dev
cnpm install babel --save-dev
cnpm install babel-cli --save-dev 安裝全局命令的客戶端，若是已經有的話，就不須要了。
package.json
{
"name": "babeltest",
"version": "1.0.0",
"description": "",
"main": "aa.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.24.1"
}
}
aa.js
'use strict' let a = 11;
babel aa.js //控制檯輸出
babel aa.js -o bb.js //輸出到文件中
babel 能夠一個文件夾下的東西都編譯，而後放到另外一個文件夾。
babel src -d lib
babel-node page.js
node若是沒有'use strict' 也只支持es5.
browsersync 這個就是webpack的
browser-sync start —server
browser-sync start —server -f /lib/*.js
babel src -d lib //這條命令的意思說說,babel把 src下的目錄處理到到lib目錄下邊。
33.圖片壓縮。
能夠用npm先安裝一個smushit這個包。
smushit img(這個是文件夾)
34.圖片的一個基本的概念。
圖片的交錯壓縮。
就是圖片顯示的時候，先顯示一個模糊的，而後在慢慢清晰，可是無交錯的時候，就是先顯示一橫橫慢慢顯示。
35.tinify這個壓縮圖片的付費包，仍是能夠的。
jpg壓縮的比較小，可是png壓縮的就比較大了。
36.base64和svg經常使用來處理圖片。
base64直接把css中的圖片以代碼的形式加入到css中。
36.5 wos老師講的html-loader主要在html頁面中引入圖片的時候，咱們能夠最html引入的圖片進行壓縮或者處理。（我看到的是圖片被壓縮放入到了html中，不是頁面直接以base64放入）
37.npm init -y這個初始最塊。-y
38.
webpack-dev-server --iFrame 這樣子的話http://localhost:3000/webpack-dev-server/
webpack-dev-server --inline 這樣子的話http://localhost:3000/
39.添加了--hot以後須要添加的配置。
添加了--hot以後，須要，引入一個webpack的變量，而後引入plugins的一個插件。
40.require("jquery")
這樣子會引入jquery的全部源碼。
41.
import from "./a.js"//js文件中，這裏模塊引入不須要寫分號
@import "./a.css";//less或者sass中，這裏引入的話，必須寫分號
42.咱們須要明白，
require或者import from引入js的時候，
即便在不一樣的module，若是引入同一js，代碼也只會加載一次。
43.npm全局安裝和局部安裝的區別。
全局安裝的話，任意第一個項目，任意一個模塊均可以引用。可是別人使用的時候有問題，因此除了cli咱們都是局部引用哈。
若是是命令行cli的，必須全局安裝。
局部安裝的，只能在本項目中引用。
44.amc規範中，require是全局的，而cmd規範中，sea.use是全局的。
45.在package.json中的script一次執行多個命令。
build:npm run build:babel && npm run build:watch && npm run build:server
"build:babel":"babel src -d lib",
"build:watch":"babel --watch src -d lib",
"build:server":"browser-sync start -server -f lib/*"
這裏邊的build:server也能夠寫成build-server.
46.browserify commonjs/index.js > index.js 壓縮js代碼
好像有參數-m -o 壓縮而且進行變量名替換之類的。
47. less的編譯。
@maincolor:#ff6699;
@mainColor-border:lighten (@masterColor,20%);
@padding-sam:10px;
cnpm install less -g
用的時候lessc就行。
less 打包成css而且壓縮。
npm install less less-plugin-clean-css
lessc ./less/index.less > index.css —clean-css=「advanced」
js的打包壓縮
uglifyjs index.js -m -o index.min.js
le
48. sass的編譯稍後往上查下解決。
49.css中的圖片編譯
base64-css你能夠在npm上搜索查看，咱們會發現，一個沒有全局話得模塊可是用本地啓動的方式。
node node_modules/base64-css/bin/cli.js -f index.css
50.npm install —production 這樣子只安裝生產環境的依賴。
51.json-loader的兩種用法。
好像第一種是不能用的，之後再說吧。
52.由於webpack只有一個出口，可是有時候咱們爲了有多個出口，不吧全部的css都寫進js中的話，那麼咱們須要把css獨立出來一個.css文件，
咱們會用這個插件。
爲了調整下輸出index.css的目錄的位置。
53.對html的預處理。
儘可能在模板內搞定這些事情。
54.原來就是用webpack -p就好了，如今官方建議用uglify後面
npm install uglify-js -g —save-dev
uglifyjs 文件/index.js -m -o 輸出文件名（-m是個混合的命令）
55.分離Js庫。
入口在配置一個：
v:['jquery']
還能夠不經過npm 安裝jquery，而是經過cdn加載
56.多個入口
57.圖片打包。
用這個形式也是能夠的。
另外一種hash表達的形式。
58.若是html中有圖片，也想經過圖片的編碼的話。
59.設置環境，可是不一樣的系統設置環境的方式不一樣，可是咱們網上一個特別好的兼容工具。
60.webpack只是適合於單頁面，或者說首頁，若是你在消息頁，詳情頁其餘的地方也須要的話，那麼咱們建議最好name.config.js在配置一個js打包。
61. 我還不知道何時只用這個，先記錄下來。
62. 這個github的webpack的配置仍是值得一看的。
https://github.com/cccyb/vue-zhihu-daily/blob/master/build/webpack.base.conf.js
63.npm install 安裝的是開發和生產全部環境的依賴。
而npm install --protduction安裝的是生產環境的依賴關係。
publicPath中咱們須要明白這是個虛擬的地方，在沒打包前，代碼的再存中以這個目錄爲標準。
65.這個須要在webpack -dev -server中配置host 和post，典型的端口被佔用的問題。
66.
改成vue-loader就行哈。
67. HtmlWebpackPlugin這個的使用爲了seo，國內的seo是搜索咱們的html頁面的關鍵詞，因此最好不要放到js當中。因此考慮這個插件。
68. 這個resolve方法。
- 1. Webpack系列——關於Webpack-dev-server配置的點點滴滴
- 2. 點點滴滴
- 3. MyBatis——點點滴滴
- 4. Git點點滴滴
- 5. DNS點點滴滴
- 6. osx 點點滴滴
- 7. Docker 的點點滴滴
- 8. 優化滴滴點點
- 9. 開發點點滴滴
- 10. Activity的點點滴滴
- 更多相關文章...
- • XML DOM 節點 - XML DOM 教程
- • XPath 節點 - XPath 教程
- • 算法總結-廣度優先算法
- • 三篇文章瞭解 TiDB 技術內幕 —— 談調度
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
- 1. Webpack系列——關於Webpack-dev-server配置的點點滴滴
- 2. 點點滴滴
- 3. MyBatis——點點滴滴
- 4. Git點點滴滴
- 5. DNS點點滴滴
- 6. osx 點點滴滴
- 7. Docker 的點點滴滴
- 8. 優化滴滴點點
- 9. 開發點點滴滴
- 10. Activity的點點滴滴