搭建webpack构建环境(1)-入门

环境依赖

确保已安装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