webpack
api:需要在服務(wù)器環(huán)境下,在你創(chuàng)建的文件夾根目錄中進(jìn)行如下操作
1、在git bash上輸入:npm install webpack -g
2、在git bash上輸入:npm install webpack
3、在git bash上輸入:npm init
之后會有package.json文件和node_modules文件
4、在根目錄創(chuàng)建index.html
5、書寫webpack.config.js文件
module.exports = {
entry:'./main.js',
output:{
path:__dirname,
filename:'bundle.js'
}
}
main.js是需要放在根目錄下面的,是寫好了js需要壓縮打包的js文件
6、執(zhí)行webpack 根目錄下會多出一個bundle.js
7、在index.html中引入bundle.js
8、頁面展示成功
9、在git bash上輸入:webpack --watch 可以監(jiān)控目錄下的文件變化并實(shí)時重新構(gòu)建
10、上面只是實(shí)時構(gòu)建后我們?nèi)绾伟呀Y(jié)果通知給瀏覽器頁面,讓HTML頁面上的bundle.js內(nèi)容保持更新
11、在git bash上輸入:npm install webpack-dev-server -g
12、在git bash上輸入:webpack-dev-server
13、在git bash上輸入:webpack-dev-server --inline
14、在http://localhost:8080/index.html中就可以實(shí)時更新修改的內(nèi)容了
15、如果想使用第三方庫需要借助npm,比如安裝一個jQuery
16、npm install jquery
17、如果想使用ES6引入某個es6模塊 比如:import $ from 'whatever'
18、目前瀏覽器只支持原生的僅支持CommonJS的寫法
19、但是我們可以通過babel-loader來加載es6模塊
20、在git bash上輸入:npm install babel-loader babel-core babel-preset-es2015 --save-dev
21、在webpack.config.js文件中在module.exports值中添加module
module.exports = {
entry:{
app:['./main.js']
},
output:{
filename:'bundle.js'
},
module:{
loaders:[{
test:/\.js$/,
loaders:['babel?presets[]=es2015'],
exclude:/node_modules/
}]
}
}
22、這樣我們就可以在js文件中使用ES6語法,babel-loader負(fù)責(zé)翻譯
23、我們也可以不用link標(biāo)簽引入CSS,而是通過webpack的style-loader和css-loader,
前者將css文件以<style></style>標(biāo)簽插入<head></head>頭部中,后者負(fù)責(zé)解讀、加載css文件
24、在git bash上輸入:npm install style-loader css-loader --save-dev
25、配置webpack.config.js文件
{
//...
module:{
loaders:[{
{test:/\.css$/,loaders:['style','css']} //如果有上面的文件直接以json的方式添加在loaders的數(shù)組中
}]
}
}
26、在main.js文件中引入css
27、在main.js文件編寫添加 --> import'./style/.css' //css路徑
28、autoprefixer 據(jù)瀏覽器版本自動處理瀏覽器前綴
29、在git bash上輸入:npm install autoprefixer-loader --save-dev
30、配置webpack.config.js文件
loaders:[{
test:/\.css$/,
loader:'style'!css!autoprefixer?{browsers:["last 2 version","> 1%"]}
}]
31、重新啟動webpack-dev-server
the end
如果還是有還是不太清楚的地方可以給我留言哦
