4回答

• 

  qq_Mr张_03494565

  2017-05-18 22:48:15

  var htmlWebpackPlugin = require('html-webpack-plugin');
  var path = require('path');
  module.exports = {
   entry: './src/app.js',
   output: {
    path: path.resolve(__dirname, './dist/js'),
    filename: 'js/[name].bundle.js'
   },
   module: {
    loaders: [
     
     {
      test: /\.tpl$/,
      loader: 'ejs-loader'
     },
     {
      test: /\.html/,
      loader: 'html-loader'
      
     },
     {
      test: /\.less$/,
      use: [
       'style-loader',
       {
        loader: 'css-loader',
        options: {
         importLoaders: 1
        }
       },
       {
        loader: 'postcss-loader',
        options: {
         plugins: (loader) => [
          require('postcss-import')({root: loader.resourcePath}),
          require('autoprefixer')(), //CSS浏览器兼容
          require('cssnano')()  //压缩css
         ]
        }
       },
       {
        loader: 'less-loader'
       }
      ]
     },
     {
      test: '/\.js$',
      loader: 'babel-loader',
      exclude: path.resolve(__dirname, './node_modules'), //排除那些文件不打包 include 制定打包那些
      query: {
       presets: ['latest']
      }
     },
     {
      test: /\.css$/,
      use: [
       'style-loader',
       {
        loader: 'css-loader',
        options: {importLoaders: 1} //这里可以简单理解为，如果css文件中有import 进来的文件也进行处理
       },
       {
        loader: 'postcss-loader',
        options: {           // 如果没有options这个选项将会报错 No PostCSS Config found
         plugins: (loader) => [
          require('postcss-import')({root: loader.resourcePath}),
          require('autoprefixer')(), //CSS浏览器兼容
          require('cssnano')()  //压缩css
         ]
        }
       }
      ]
     },
     {
      test: /\.(png|jpg|gif|svg)$/i,
      loaders: [
       'url-loader?limit=20000&name=assets/[name]-[hash:5].[ext]',
       'image-webpack-loader'
      ]
      // loader: 'url-loader', //file-loader
      // query: {
      //   limit: 20000,
      //   name: 'assets/[name]-[hash:5].[ext]'
      // }
     }
    ]
   },
   
   plugins: [
    new htmlWebpackPlugin({
     filename: 'index.html',
     template: 'index.html',
     inject: 'body'     //将js文件插入body文件内
    }),
   ]
  };

  
  

  0 0
• 

  qq_Mr张_03494565

  2017-05-18 22:47:43

  <div class="layer">
      <img src="${require('../../assets/bg.jpg')}" alt="">
      <div>this is<%= name %></div>
          <% for (var i = 0; i < arr.length; i++){ %>
          <%= arr[i] %>
          <% } %>
      </div>
      另外看看是不是webpack.config.js配置写错了。

  
  

  0 0
• 

  不浪漫

  2017-05-14 14:01:15

  webpack里不用$ require语法了。可以直接img标签就插入的。

  0 0
• 

  YouNoFish

  2017-04-13 08:06:19

  看看图片路径是否正确。。

  0 0