環(huán)境依賴(lài)
確保已安裝nodejs 和npm ,并且可以正常運(yùn)行(在終端執(zhí)行:node -v npm -v,出現(xiàn)對(duì)應(yīng)版本信息說(shuō)明安裝成功 )
本人寫(xiě)這篇文章時(shí)的環(huán)境為
mac 系統(tǒng)
nodejs v6.9.1LTS
npm v3.10.8
webstorm 10
初始化項(xiàng)目
創(chuàng)建項(xiàng)目
mkdir my-project
cd my-project
#創(chuàng)建package.json 并全部使用默認(rèn)配置
npm init -y
package.json內(nèi)容如下:
{
"name": "my-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
安裝webpack
#先全局安裝webpack
npm i webpack -g
#項(xiàng)目中加入webpack到開(kāi)發(fā)環(huán)境依賴(lài)中
npm i webpack --save-dev
#安裝過(guò)程中會(huì)有中間停頓，請(qǐng)勿手動(dòng)停止
為甚么安裝全局又安裝局部，請(qǐng)自行百度了解汉买。安裝后的package.json
{
...
"devDependencies": {
"webpack": "^1.13.3"
}
...
}
項(xiàng)目結(jié)構(gòu)
請(qǐng)自行創(chuàng)建以上文件
熟悉的hello world
component.js
module.exports = function () {
var element = document.createElement('h1');
element.innerHTML = 'Hello world'; return element;
};
index.js
var component = require('./component');
document.body.appendChild(component());
注意:這里目前不能使用import引用文件,要使用es6的方式需要加入babel-loader
配置webpack.config.js文件
在配置之前蜀涨，我們先加入一個(gè)為項(xiàng)目生成簡(jiǎn)單頁(yè)面的插件html-webpack-plugin(省了自己增加js后還要手動(dòng)引用到頁(yè)面的麻煩)
npm i html-webpack-plugin --save-dev
const path = require('path');
//引入剛才安裝插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//配置用到的路徑
const PATHS = {
app: path.resolve(__dirname, 'app'),
build: path.resolve(__dirname, 'build')
};
module.exports = {
//加載文件入口
entry: {
app: PATHS.app
},
//處理后的出口
output: {
path: PATHS.build,
filename: '[name].js'
},
//插件
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack demo'
})
]
};
執(zhí)行
命令行輸入:webpack
krockdeMacBook-Pro:my-project krock$ webpack
Hash: 22e371d51a6f1503edf9//項(xiàng)目的hash
Version: webpack 1.13.3 //webpack版本
Time: 602ms //所用時(shí)間
//構(gòu)建后的結(jié)果
Asset Size Chunks Chunk Names
app.js 1.78 kB 0 [emitted] app
index.html 180 bytes [emitted]
//原文件
[0] ./app/index.js 120 bytes {0} [built]
[1] ./app/component.js 182 bytes {0} [built]
Child html-webpack-plugin for "index.html":
//3個(gè)隱藏的模塊,想要顯示使用命令 webpack --display-modules
+3 hidden modules
添加腳本命令build
在package.json>scripts中加入build
...
"scripts": {
"build": "webpack"
},
...
執(zhí)行命令就可以使用 npm run build
下一章內(nèi)容
由于生產(chǎn)環(huán)境和開(kāi)發(fā)環(huán)境的不同捺癞，我們需要區(qū)別對(duì)待畦木，下一章我們切分配置文件
進(jìn)入下一章-分離配置文件
如果上述文章有什么問(wèn)題绞绒，發(fā)現(xiàn)后請(qǐng)留言，本人看到后會(huì)立刻修改耕腾，以免給后來(lái)的童鞋造成錯(cuò)誤的引導(dǎo)
本系列文章參考自surviceJS
