项目中使用webpack

安装

npm install webpack --save-dev

其中--save-dev表示该包为开发环境依赖包。安装完后会生成一个node_modules目录,并且在package.json文件中多出如下几行:

  "devDependencies": {
    "webpack": "^1.13.0"
  }

如果写为--save则表示该包为生产环境依赖包,在package.json文件中会新增或者修改dependencies 字段。

配置webpack

我们需要让webpack知道如何处理我们的项目目录结构,因此需要配置文件webpack.config.js。一个简单的配置文件如下所示:

var webpack = require('webpack');
var path = require('path');                 //引入node的path库

var config = {
  entry: ['./app/index.js'],                //入口文件
  output: {
    path: path.resolve(__dirname, 'dist'),  // 指定编译后的代码位置为 dist/bundle.js
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      // 为webpack指定loaders
      //{ test: /\.js$/, loaders: ['babel'], exclude: /node_modules/ }
    ]
  }
}

module.exports = config;

到目前为止,我们已经可以让webpack工作了(我用的是全局安装webpack),在命令行执行

webpack

我们看到,会有一个新的文件/dist/bundle.js生成出来了。但是我们还需要一个html文件来加载编译后的代码,这就需要用到一个webpack插件:html-webpack-plugin

安装html-webpack-plugin

使用如下命令安装:

npm install html-webpack-plugin –save-dev

然后在我们的webpack.config.js中增加下面几行:

var HtmlWebpackPlugin = require('html-webpack-plugin');

*******

plugins: [ new HtmlwebpackPlugin({ title: 'React Biolerplate by Linghucong' }) ]

现在在命令行下再次执行webpack命令,会看到在dist目录下生成了两个文件:bundle.jsindex.html。其中index.html内容如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack Plugin HtmlwebpackPlugin</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

如果没有使用-g,那么要用的webpack可执行文件位于:

./node_modules/.bin/webpack

我们可以在package.json中为此命令增加一个快捷方式:

# package.json
... other stuff
"scripts": {
  "webpack": "./node_modules/.bin/webpack",
}

现在就可以直接使用命令npm run webpack来执行webpack了。

~~~

未经允许不得转载:朱邦邦的博客 » 项目中使用webpack

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址