iuap-design/blog

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

Opened this issue · 1 comments

GuoYongfeng commented

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
GuoYongfeng commented

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

  • 👍1