首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何为Pug、React和ES6设置webpack

如何为Pug、React和ES6设置webpack
EN

Stack Overflow用户
提问于 2017-02-08 12:24:54
回答 1查看 7.5K关注 0票数 9

我正在尝试用React和ES6做一个网站。我正在用Webpack用巴别塔来转换我的JS,它工作得很好。现在我需要知道如何用Pug (或HTML语言)编写我的模板,并将其添加到Webpack工作流中。我希望我的build文件夹有两个文件:

从我的bundle.js

  • My文件编译而来的
  1. 我的

index.html文件

一个示例webpack.config.js文件会很有帮助,但我真正想要的只是如何做到这一点的一般想法。

谢谢!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-02-08 13:50:38

有几个webpack插件,你需要先安装,以使用pug模板与webpack。

  1. htmlwebpack plugin
  2. pug-loader

使用htmlwebpack插件,您可以指定pug模板文件

代码语言:javascript
复制
new HtmlWebpackPlugin({
      template : './index.pug',
      inject   : true
})

pug模板文件将由pug-loader加载。

代码语言:javascript
复制
    {
        test: /\.pug$/,
        include: path.join(__dirname, 'src'),
        loaders: [ 'pug-loader' ]
    },

一个示例的webpack配置文件可以如下所示-

代码语言:javascript
复制
const path              = require('path');
const webpack           = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const isTest = process.env.NODE_ENV === 'test'

module.exports = {

  devtool: 'eval-source-map',

  entry: {
      app: [
          'webpack-hot-middleware/client',
          './src/app.jsx'
      ]
  },
  output: {
    path       : path.join(__dirname, 'public'),
    pathinfo   : true,
    filename   : 'bundle.js',
    publicPath : '/'
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new ExtractTextPlugin("style.css", { allChunks:false }),
    isTest ? undefined : new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
    }),
    new HtmlWebpackPlugin({
          template : './index.pug',
          inject   : true
    })
  ].filter(p => !!p),

  resolve: {
    extensions: ['', '.json', '.js', '.jsx']
  },

  module: {
    loaders: [
        {
            test    : /\.jsx?$/,
            loader  : 'babel',
            exclude : /node_modules/,
            include : path.join(__dirname, 'src')
        },
        {
            test    : /\.scss?$/,
            loader  : ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader"),
            include : path.join(__dirname, 'sass')
        },
        {
            test    : /\.png$/,
            loader  : 'file'
        },
        {
            test    : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
            loader  : 'file'
        },
        {
            test: /\.pug$/,
            include: path.join(__dirname, 'src'),
            loaders: [ 'pug-loader' ]
        },
        {
            include : /\.json$/,
            loaders : ["json-loader"]
        }
    ]
  }
}
票数 11
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42104697

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档