07-开发环境基本配置

标签：module   filename   其他   样式   webpack   serve   路径   指定   asc   

通过前面知识的学习，我们学会了打包样式资源，html资源，图片资源和其他资源。以及学会了通过devServer开启热更新。现在我们便可以开始配置基本的开发环境了；

开发环境基本配置

webpack.config.js的配置如下：

/**
 * 开发环境配置
 */

const {resolve} = require(‘path‘)
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)

module.exports ={
  entry: ‘./src/index.js‘,
  output: {
    filename: ‘built.js‘,
    path: resolve(__dirname, ‘build‘)
  },
  module: {
    rules: [
      //loader的配置
      //处理less资源
      {
        test: /\.less$/,
        use: [‘style-loader‘, ‘css-loader‘, ‘less-loader‘]
      },
      //处理css资源
      {
        test: /\.css$/,
        use: [‘style-loader‘, ‘css-loader‘]
      },
      //处理图片资源
      {
        test: /\.(jpg|png|gif)$/,
        loader: ‘url-loader‘,
        options: {
          limit: 8 * 1024,
          name: ‘[hash:10].[ext]‘,
          // esModule: false
        }
      },
      //处理html中图片的引入
      {
        test: /\.html$/,
        loader: ‘html-loader‘
      },
      //处理其他资源
      {
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: ‘file-loader‘,
        options: {
          name: ‘[hash:10].[ext]‘
        }
      }
    ]
  },
  plugins: [
    //plugins的配置
    new HtmlWebpackPlugin({
      template: ‘./src/index.html‘
    })
  ],
  devServer: {
    contentBase: resolve(__dirname, ‘build‘),
    compress: true,
    port: 3000,
    open: true
  }
}

优化输出目录

首先我们整理一下src目录下的文件，并修改webpack.config.js中的路径，随后使用webpack打包。打包出来的build目录下的文件还是很乱：

如果想要打包出来的build目录下的文件能与src目录结构相同呢？

可以给webpack.config.js中的output中的filename添加前缀，这样打包过后的文件会自动创建这个指定的目录：

在处理图片时，只需要添加outputPath属性就能指定打包后的目录结构了：

重新打包，图片文件被打包进了imgs目录：

同理，可以在处理其他资源的loader的option属性中添加outputPath属性指定打包后的目录结构：

注意了，主要的打包输出目录是由五大配置之一的output中的path属性决定的，上面的这一属性为build。所以，之后使用outputPath指定的路径都要拼接在build后面。最后形成完整的路径。

07-开发环境基本配置

标签：module   filename   其他   样式   webpack   serve   路径   指定   asc   

原文地址：https://www.cnblogs.com/AhuntSun-blog/p/13607595.html