webpack2.0學習

1.進到指定的目錄下，新建本身的文件名

mkdir webpack-test 建立你的項目名稱或者你己有的項目名稱
cd webpack-test

npm init
npm install webpack --save--dev

打包文件
webpack hello.js hello.bundle.js

一個腳本引入另外一個腳本
require('./hello.js');

一個js裏引入css樣式的時候須要安裝css-loader
在js裏寫require('./style.css');
這時候報錯是由於沒有安裝依賴css-loader style-loader

而後安裝
npm set registry https://registry.npm.taobao.org # 註冊模塊鏡像
npm set disturl https://npm.taobao.org/dist # node-gyp 編譯依賴的 node 源碼鏡像
npm cache clean # 清空緩存

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

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' 在命令行指定loader

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch 監聽數據更新，從新打包,每一次更新以後，都會從新打包數據

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --process 打包的過程

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --process --display-modules引用的全部的模塊

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --process --display-reasons打包的緣由

 

var path = require('path');
module.exports={

entry:'./src/script/main.js',
output:{
path:path.resolve(__dirname, 'dist/js'),//取相對路徑
filename:'[name].js'
}
}

當webpack.config.js改名爲webpack.devconfig.js
webpack --config webpack.devconfig.js

 

pacage.js

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
},

再執行npm run webpack

命令行輸入webpack和npm run webpack是一個意思嗎
webpack命令寫入到package.json的scripts標籤中去了

 

webpack引用插件htmlwebpackplugin

安裝插件
npm install html-webpack-plugin --save--dev

webpack.confgi.js裏引用
var htmlwebpackplugin=require('html-webpack-plugin')

使用在webpack.config.js裏
var htmlwebpackplugin=require('html-webpack-plugin');

plugins:[
new htmlwebpackplugin({
// filename:'index-[hash].html',
inject:'body',//把腳本放在頭部仍是放在body標籤 裏
// title:'陳蓉你好啊!',
minify:{
removeComments:true,
collapseWhitespace:true
},
date:new Date(),
template:'index.html'

})
]

Q:我添加了去掉註釋和去掉空格，沒有起做用？ Q:我在頁面裏引用了模板引擎時沒有起做用<%= htmlwebpackplugin.options.date%>Q:在頁面indext.html指向某個文件的時候沒有效果<script type="text/javascript" src="htmlwebpackplugin.files.chunks.a.entry"></script>