webpack --学习笔记

webpack解析ES6

使用babel-loader来解析ES6,babel的配置文件是.babelrc。
增加ES6的babel preset配置:

{
	"presets": [
		"@babel/preset-env"          =>增加ES6的babel preset配置
	],
	"plugins":[
		"@babel/proposal-class-properties"
	]
}

输入指令:

npm install @babel/core @babel/preset-env babel-loader -D

webpack解析React JSX

{
	"presets": [
		"@babel/preset-env"          
		"@babel/preset-react"          =>增加React的babel preset配置
	],
	"plugins":[
		"@babel/proposal-class-properties"
	]
}

安装指令:

npm install react react-dom @babel/preset-react -D

webpack解析css

css-loader 用于加载 .css 文件,并且转换成 commonjs 对象;
style-loader 将样式通过 <style> 标签插入到head中。

安装指令:

npm install style-loader css-loader -D

// .babelrc
module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /.js$/,
        use: 'babel-loader'          //解析ES6和React JSX所需配置
      },
      {
        test: /.css$/,
        use: [
          'style-loader',      //顺序不能改变,因为解析器是从右向左解析的
          'css-loader'
        ]
      }
    ]
  }
}

webpack解析less和sass

less-loader 用于将less转换成css

安装指令:

npm i less less-loader -D

//.babelrc
module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /.js$/,
        use: 'babel-loader'          //解析ES6和React JSX所需配置
      },
      {
        test: /.css$/,
        use: [
          'style-loader',     //顺序不能改变,因为解析器是从右向左解析的
          'css-loader'
        ]
      },
      {
        test: /.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
}

webpack解析图片、字体

file-loader用于处理文件

安装命令:

npm i less file-loader -D

//.babelrc
module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /.js$/,
        use: 'babel-loader'          //解析ES6和React JSX所需配置
      },
      {
        test: /.css$/,
        use: [
          'style-loader',     //顺序不能改变,因为解析器是从右向左解析的
          'css-loader'
        ]
      },
      {
        test: /.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /.(png|jpg|gif|jpeg)$/,       //解析的图片类型
        use: 'file-loader'               //解析文件
      },
       {
        test: /.(woff|woff2|eot|ttf|otf)$/,       //解析的字体类型
        use: 'file-loader'               //解析文件
      }
    ]
  }
}

url-loader也可以处理图片和字体
可以设置较小资源自动 base64

{
        test: /.(png|jpg|gif|jpeg)$/, 
        use: [
			{
				loader: 'url-loader',
				options: {
					limit: 10240     //如果图片的大小小于10k,webpack打包会自动做base64操作
				}
			}
		]
      }

webpack文件监听

两种方式:

• 启动webpack命令时,带上 --watch 参数
• 在配置webpack.config.js中设置watch:true

// package.json
"scripts": {
	"watch": "webpack --watch"
}

运行命令:

npm run watch

方法二:设置watch:true

//webpack.config.js
module.export = {
	//默认false
	watch: true,
	//只有开启监听模式,watchOptions才有意义
	watchOptions: {
		//默认为空,不监听的文件或者文件夹,支持正则匹配
		ignored: /node_modules/,
		//监听到变化发生后会等300ms再去执行,默认300ms
		aggregateTimeout: 300,
		//判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的,默认每秒询问1000次
		poll: 1000
	}
}

webpack热更新

使用webpack-dev-server来实现热更新
WDS 不刷新浏览器,不输出文件,而是放在内存中
使用HotModuleReplacementPlugin插件

// package.json
"scripts": {
	"dev": "webpack-dev-server --open"
}