運行命令
- 安裝依賴：
npm install - 運行項目：
npm start
大致流程
-
npm init：新建package.json -
將需要的依賴模塊加入
dependencies（生產環境） 和devDependencies（開發環境，在本地打包所需的模塊） -
npm install：自動安裝上述添加好的模塊 -
配置
webpack.config.js -
配置
package.json的script：自定義命令
如果不在
package.json里面配置，可以通過手動安裝模塊（☟），輸入命令，執行后會自動添加到dependencies或devDependencies中。
文件目錄
assets/
- css/
- style.scss
src/
- content.js
- index.js
index.html
package.json
webpack.config.js
package.json 文件預覽
{
"name": "webpack_scaffold",
"version": "1.0.0",
"description": "a scaffold with webpack",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --port 8080 --hot --inline --progress --colors --devtool eval",
"build": "webpack --display-error-details",
"watch": "webpack --progress --colors --watch"
},
"author": "Ruth",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.16.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"css-loader": "^0.25.0",
"mustache-loader": "^0.3.0",
"node-sass": "^3.4.2",
"sass-loader": "^3.1.1",
"scss-loader": "0.0.1",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1"
},
"dependencies": {
"jquery": "^3.1.1"
},
"repository": {
"type": "git",
"url": ""
},
"bugs": {
"url": ""
},
"homepage": ""
}
webpack.config.js 配置預覽
var webpack = require('webpack');
module.exports = {
entry: {
index: [
'webpack-dev-server/client?http://localhost:8080/',
'./src/index.js'
]
},
output: {
path: './dist', // webpack 本地打包路徑
filename: "bundle.js",
// 線上發布路徑，和path最好保持一致，html頁面引入script路徑
publicPath: '/dist/'
},
/*devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true
},*/
module: {
loaders: [{
test: /\.css$/,
loader: 'style!css'
}, {
test: /\.scss$/,
loader: 'style!css!sass?sourceMap'
}, {
test: /\.js$/,
loader: 'babel',
// 可以單獨在當前目錄下配置.babelrc，也可以在這里配置
query: {
presets: ['es2015']
},
// 排除 node_modules 下不需要轉換的文件，可以加快編譯
exclude: /node_modules/
}, {
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
}, {
test: /\.tpl$/,
loader: 'mustache'
}]
},
plugins: [
// 暴露全局接口
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
}
手動安裝模塊說明
☛ 安裝 webpack，建議本地安裝，減少依賴
`$ npm install webpack --save-dev`
☛ 如果需要使用 webpack 開發者工具，要單獨安裝
`$ npm install webpack-dev-server --save-dev`
☛ 安裝各種 loader：模塊和資源的轉換器
Webpack 本身只能處理原生的 JavaScript 模塊，但是 loader 轉換器可以將各種類型的資源轉換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。
（1）安裝 style/css/sass loader
$ npm install --save-dev style-loader css-loader sass-loader
如果有問題，需要安裝 node-sass
配置 webpack.config.js
module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css!sass'
}]
}
（2）將 ES2015 轉換成 ES6
安裝 Babel 和 preset：
$ npm install --save-dev babel-core babel-preset-es2015
安裝 babel-loader
$ npm install --save-dev babel-loader
配置 babelrc
{ "presets": [ "es2015" ] }
配置 webpack.config.js
module: {
loaders: [{
test: /\.js$/,
// 排除 node_modules 下不需要轉換的文件，可以加快編譯
exclude: /node_modules/,
loader: 'babel-loader'
}]
}
(3) 安裝需要的第三方庫
npm install --save jquery babel-polyfill
// --save：添加到 dependencies 中，表明是運行時所需要的庫
// 使用 babel-polyfill：ES2015 API 在舊的瀏覽器中也可以使用
（4）其他庫
☛ 安裝插件
其他
github地址:
webpack_scaffold2：在 webpack_scaffold1 的基礎上進行更改，對 css 及第三方 js 庫進行打包，並更改 webpack.config.js 中的啟動本地服務的配置
具體參考
☂ 參考：
☂ 問題解決參考：