webpack 完全教程-05-webpack 集成 npm scripts

@GuoYongfeng 2016-07-24 13:52:18发表于 iuap-design/blog

webpack 集成 npm scripts

$ npm init
$ npm install webpack --save-dev
# 或者安装指定版本
$ npm install webpack@1.2.x --save-dev
$ mkdir src && mv entry.js src

修改package.json

scripts: {
    "dev": "webpack --colors --progress --watch"
}

解读

progress 编译进度
colors 编译产出的命令行颜色
watch 持续监听编译过程

webpack.config.js

创建webpack.config.js,该文件是webpack的配置文件,可以将webpack的相关配置都在该文件中配置。

var path = require('path');

module.exports = {
    entry: "./src/entry.js",
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: "bundle.js"
    }
};

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webpack 完全教程</title>
</head>
<body>
  <script src="./dist/bundle.js"></script>
</body>
</html>

执行npm

$ npm run dev