wepack初探
重新整頓webpack搭建流程
webpack重要設置
-
entry
:進口設置 -
output
:輸出設置 -
module
:文件剖析模塊設置 -
plugin
:插件設置
目次引見
-
build/
:寄存webpack構建設置文件 src/
:項目開闢目次-
public/
:大眾靜態文件 -
script/
:劇本文件 -
style/
:款式文件 -
view/
:頁面文件
-
初始npm包
開闢依靠
babel-core
babel-loader
-
webpack
:這裏運用webpack3
版本
最先搭建
在
build/
文件夾下面建立webpack.dev.js
,代碼以下:const path = require('path') module.exports = { entry: path.join(__dirname, '../src/script/index.js'), output: { path: path.join(__dirname, '../dist'), filename: 'js/[name].js' }, module: { loaders: [{ test: /\.js$/, use: 'babel-loader' }] } }
- 在
src/script/
文件夾下面建立index.js
,恣意寫幾行代碼以便測試 - 在
src/view/
文件夾下面建立index.html
,引入上面的index.js
文件 -
npm init -y
或許yarn init -y
建立package.json
文件,裝置開闢依靠 在
package.json
文件中增加scripts
屬性"scripts": { "dev": "rm -rf dist & webpack --config build/webpack.dev.js" }
翻開終端實行npm run dev
敕令
引入html-webpack-plugin
插件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.export = {
entry: path.join(__dirname, '../src/script/index.js'),
output: {
path: path.join(__dirname, '../dist'),
filename: 'js/[name].js'
},
module: {
loaders: [{
test: /\.js$/,
use: 'babel-loader'
}]
},
plugins: [
new HtmlWebpackPlugin({
// 打包天生html文件名,該文件被安排在輸出目次中
filename: 'index.html',
// 模板文件,以該文件天生打包后的html文件
template: path.join(__dirname, '../src/view/index.html')
})
]
}