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

GuoYongfeng · 2016-07-24T13:52:18Z

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

The text was updated successfully, but these errors were encountered:

GuoYongfeng · 2016-07-29T03:25:00Z

webpack 的配置项

webpack 的配置项主要包括以下几点：

const config = {
  entry: { },
  output: { },
  module: { },
  resolve: { },
  plugins: [ ],
  externals: { }
};

module.exports = config;

entry: 入口,定义要打包的文件
output: 出口，定义打包输出的文件；包括路径，文件名，还可能有运行时的访问路径（publicPath）参数
module: webpack将所有的资源都看做是模块，而模块就需要加载器；主要定义一些loaders,定义哪些后缀名的文件应该用哪些loader
- test: 检测哪些文件需要此loader，是一个正则表达式
- exclude: 忽略哪些文件
- resolve: 定义能够被打包的文件，文件后缀名
plugins: 定义一些额外的插件

另外，更多配置项可以参见webpack configuration

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

GuoYongfeng commented Jul 24, 2016 •

edited

GuoYongfeng commented Jul 29, 2016 •

edited

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

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

Comments

GuoYongfeng commented Jul 24, 2016 • edited

webpack 集成 npm scripts

webpack.config.js

GuoYongfeng commented Jul 29, 2016 • edited

webpack 的配置项

GuoYongfeng commented Jul 24, 2016 •

edited

`webpack.config.js`

GuoYongfeng commented Jul 29, 2016 •

edited