环境依赖
确保已安装nodejs 和npm ,并且可以正常运行(在终端执行:node -v npm -v,出现对应版本信息说明安装成功 )
本人写这篇文章时的环境为
mac 系统
nodejs v6.9.1LTS
npm v3.10.8
webstorm 10
初始化项目
创建项目
mkdir my-project
cd my-project
#创建package.json 并全部使用默认配置
npm init -y
package.json内容如下:
{
"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
#项目中加入webpack到开发环境依赖中
npm i webpack --save-dev
#安装过程中会有中间停顿，请勿手动停止
为甚么安装全局又安装局部，请自行百度了解。安装后的package.json
{
...
"devDependencies": {
"webpack": "^1.13.3"
}
...
}
项目结构
请自行创建以上文件
熟悉的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文件
在配置之前，我们先加入一个为项目生成简单页面的插件html-webpack-plugin(省了自己增加js后还要手动引用到页面的麻烦)
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'
})
]
};
执行
命令行输入:webpack
krockdeMacBook-Pro:my-project krock$ webpack
Hash: 22e371d51a6f1503edf9//项目的hash
Version: webpack 1.13.3 //webpack版本
Time: 602ms //所用时间
//构建后的结果
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个隐藏的模块,想要显示使用命令 webpack --display-modules
+3 hidden modules
添加脚本命令build
在package.json>scripts中加入build
...
"scripts": {
"build": "webpack"
},
...
执行命令就可以使用 npm run build
下一章内容
由于生产环境和开发环境的不同，我们需要区别对待，下一章我们切分配置文件
进入下一章-分离配置文件
如果上述文章有什么问题，发现后请留言，本人看到后会立刻修改，以免给后来的童鞋造成错误的引导
本系列文章参考自surviceJS
