Webpack笔记（二）

三.webpack 开发环境的基本配置

        3.1 创建配置文件

                1. 创建文件 webpack.config.js

const {resolve} = require('path')
module.exports = { 
    entry: './src/js/index.js', // 入口文件 
    output: { // 输出配置 
        filename: './built.js', // 输出文件名 
        path: resolve(__dirname, 'build/js') // 输出文件路径配置 
    }, 
    mode: 'development' //开发环境 
};

                2.运行指令webpack

        3.2 打包样式资源

                1.创建css/less等样式文件

                2.安装loader包

                3.修改配置文件

/**
 * webpack.config.js  webpack的配置文件
 *  作用：指示webpack干那些活(当你执行webpack指令时，会加载里面的配置)
 *  
 * 所有构建工具都是基于nodejs平台运行的，模块化默认采用commonjs
*/

//resolve用来凭借绝对路径的方法
const {resolve} = require('path')

module.exports = {
  //webpack配置
  //入口起点
  entry: './src/index.js',
  //输出
  output:{
    //输出文件名
    filename:'built.js',
    // 输出路径
    //__dirname nodejs的变量，代表当前文件的目录绝对路径
    path:resolve(__dirname,'build')
  },
  //loader的配置
  module:{
    rules:[
      //详细loader配置
      //不同文件必须配置不同loader处理
      {
        //匹配哪些文件
        test:/\.css$/,
        //使用哪些loader进行处理
        use:[
          //use数组中loader执行顺序：从右到左，从下到上 依次执行 
          //创建style标签，将js中的样式资源插入进去，添加到head中生效
          'style-loader',
          //将css文件变成commonjs模块加载js中 ，里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        test:/\.less$/,
        use:[
          'style-loader',
          'css-loader',
          //将less文件编译成css文件
          //需下载less-loader和less
          'less-loader'
        ]
      }
    ]
  },
  //plugins的配置
  // plugins:[

  // ],
  // mode:'development' // mode:'production'
}

3.3打包HTML资源

        创建html文件，并下载plugin包

        npm i --save-dev html-webpack-plugin

        修改配置文件

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:[

  //   ]
  // },
  plugins:[
    //plugins的配置
    //html-webpack-plugin
    // 功能：默认创建一个空的HTML，自动引入打包输出的所有资源(JS/CSS)
    new HtmlWebpackPlugin({
      //复制 './src/index.html'文件，并自动引入刀爆输出的所有资源（JS/CSS）
      template:'./src/index.html'
    })  
  ],
  // mode:'development'
}

3.4 打包图片资源

​
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:[
      {
        test:'/\.less$/',
        use:['style-loader','css-loader','less-loader']
      },
      {
        //处理图片资源（默认处理不了html中的img图片）
        test:/\.(jpg|png|gif)$/,
        //下载url-loader file-loader
        loader:'url-loader',
        options:{
          //图片大小小于8kkb，就会被base64处理
          //优点：减少请求数量（减轻服务器压力）
          //缺点：图片体积会更大（文件请求速度更慢）
          limit: 8 * 1024,
          //问题： 因为url-loader默认使用es6模块化解析，而html-loader引入图片是common.js
          //解析是会出问题
          //解决：关闭url-loader的es6模块化，使用common.js解析
          esModule:false,
          //给图片重命名
          name:'[hash:10].[ext]'//取前十位
        }
      },
      {
        test:/\.html$/,
        //处理html文件中的img图片（负责引入img，从而能被url-loader进行处理）
        loader:'html-loader'
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ],
  // mode:'development'
}

​

3.5 打包其他资源

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

module.exports = {
  entry:'./src/index.js',
  output:{
    filename:'built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      //打包其他资源（除了html/js/css等资源以外的资源）
      {
        //排除css/js/html/less资源
        exclude:/\.(html|js|css|less)$/,
        loader:'file-loader',
        options:{
          name:'[hash:10].[ext]'
        }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ],
  mode:'development'
}

3.6 devServer

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

module.exports = {
  entry:  ...,
  output:  ...,
  module:  ...,
  plugins:  ...,
  mode:  ...,
    
  //开发服务器devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
  devServer:{
    //项目构建后路径
    contentBase:resolve(__dirname,'build'),
    //启动gzip压缩
    compress:true,
    //端口号
    port:3000,
    //自动打开浏览器
    open:true
  }
}

3.7开发环境配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	entry: './src/js/index.js',
	output: {
		filename: 'js/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]',
					// 关闭 es6 模块化
					esModule: false,
					outputPath: 'imgs'
				}
			},
			{
				// 处理 html 中 img 资源
				test: /\.html$/,
                loader: 'html-loader'
            },
			{
				// 处理其他资源
				exclude: /\.(html|js|css|less|jpg|png|gif)/,
				loader: 'file-loader',
				options: {
					name: '[hash:10].[ext]',
					outputPath: 'media'
				}
			}
		]
	},
	plugins: [
		// plugins 的配置
		new HtmlWebpackPlugin({
			template: './src/index.html'
		})
	],
	mode: 'development',
	devServer: {
		contentBase: resolve(__dirname, 'build'),
		compress: true,
		port: 3000,
		open: true
	}
};