码迷,mamicode.com
首页 > 其他好文 > 详细

07-开发环境基本配置

时间:2020-09-17 12:11:38      阅读:4      评论:0      收藏:0      [点我收藏+]

标签: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目录:

技术图片

同理,可以在处理其他资源的loaderoption属性中添加outputPath属性指定打包后的目录结构:

技术图片

技术图片

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

07-开发环境基本配置

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

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!