webpack learning (1)

1. Use Webpack's configuration file

File webpack.config.js:

const path = require('path');
module.exports = {
  entry: './index.js', //要打包的文件
  output: {
    filename: 'bundle.js', //打包后文件的名字
    //__dirname指的是当前文件webpack.config.js所在的位置
    path: path.resolve(__dirname, 'bundle') //打包后文件所存放的位置
  }
}

1. The webpack default configuration file is named webpack.config.js. After the configuration is complete, use the command npx webpack to pack the file.
2. If the configuration file is named in another form, for example: webpackconfig.js, you can use the command npx webpack --config webpackconfig.js to pack the file.
3. It can be added in the package.json file:

"script": {
	"bundle": "webpack"
}

Then use the npm run bundle command to package.

Second, an analysis of Webpack packaging output content

File webpack.config.js:

const path = require('path');
module.exports = {
  //打包时有警告：The 'mode' option has not been set,需要配置mode
  //production:打包后压缩代码，development:打包后不压缩代码
  mode: 'production',  //默认配置，但是添加之后不会有警告
  entry: './index.js', //要打包的文件
  output: {
    filename: 'bundle.js', //打包后文件的名字
    //__dirname指的是当前文件webpack.config.js所在的位置
    path: path.resolve(__dirname, 'bundle') //打包后文件所存放的位置
  }
}

3. What is Loader (define how to pack for a specific file)

The loader is used by webpack to pre-process the module. Before a module is introduced, the content of the module will be processed by the loader in advance

module.exports = {
	module: {
		rules: [{
			test: /\.(jpg|png|gif)$/, //以.jpg结尾的文件
			use: {
				loader: 'file-loader',
				options: {
					name: '[name]_[hash].[ext]',  //打包后文件名称和后缀与打包前一致
					outputPath: 'images/'
				}
			}
		}]
	}
}

To use this loader, use the command npm install file-loader -D to install this loader.

module.exports = {
	module: {
		rules: [{
			test: /\.js$/, //以.js结尾的文件
			use: [{
				loader: 'babel-loader',
				options:{
					presets:['react'] // 预设处理里面的内容是jsx的，需要npm i -D babel-preset-react
				}
			}]
		}]
	}
}

To use this loader, you need to use the command npm install babel-loader babel-core -D to install this loader. This loader is used to process the files at the end of js

module.exports = {
	module: {
		rules: [{
			test: /\.(jpg|png|gif)$/, //以.jpg结尾的文件
			use: {
				loader: 'url-loader',
				options: {
					name: '[name]_[hash].[ext]',  //打包后文件名称和后缀与打包前一致
					outputPath: 'images/',
					limit: 10240 //小于10240kb会以base64的格式打包在bundle.js文件中，大于才会生成文件
				}
			}
		}]
	}
}

To use this loader, use the command npm install url-loader -D to install the loader.

Four, use Loader to package static resources

module.exports = {
	module: {
		rules: [{
			test: /\.(jpg|png|gif)$/, //以.jpg结尾的文件
			use: {
				loader: 'url-loader',
				options: {
					name: '[name]_[hash].[ext]',  
					outputPath: 'images/',
					limit: 10240 
				}
			}
		},{
			test: /\.(eot|ttf|svg)$/, 
			use: {
				loader: 'file-loader', //打包图标文字文件
			}
		},{
			test: /\.css$/, 
			use: [
				'style-loader',
				{
					loader: 'css-loader',
					options: {
						importLoaders :2 //表示在sass文件中额外引入的sass文件也会走postcss-loader和sass-loader
						modules: true //开启css模块化的打包，默认为false,即在一个文件中引入sass,会作用于此文件引入的其他模块中，开启之后则只作用于此模块。
					}
				},
				'sass-loader',
				'postcss-loader'
			] //打包css/sass结尾的文件
			//sass-loader:将模块中sass格式的样式解析成css格式的样式
			//css-loader:将模块中的样式生成最终的样式块
			//style-loader:将css-loader处理后的样式挂载到对应的节点上面
			//postcss-loader:
		}]
	}
}

1. To use this sass-loader, use the command npm install sass-loader node-sass -D to install this loader.
2. Use postcss-loader: add the required prefix to the css you write. To use this module, you need to create a new file postcss.config.js. This file is in the same directory as webpack.config.js, add it in:

module.exports = {
	plugins: [
		require('autoprefixer')
	]
}

To add this module to the project, use the command npm install autoprefixer -D
3. If you add modules: true, the sass method is changed to: import style from './index.sass'; The method of use is style.avatar

Five, use plugins to make packaging more convenient

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
	plugins: [new HtmlWebpackPlugin()], //打包后自动生成index.html文件，并把打包生成的js自动引入到这个html文件中
	plugins: [new HtmlWebpackPlugin(
		template: 'src/index.html'  //使用此模板来生成打包后的html文件，生成的js文件会自动加到生成的html文件中
	),new CleanWebpackPlugin(
		'dist'  //每次打包之前都会自动将dist文件中的内容删除
	)]
}

Use the command npm i html-webpack-plugin -D to install

6. Basic configuration of Entry and Output

const path = require('path');
module.exports = {
  entry: {
	main: './src/index.js',
	sub: './src/index.js'
  },
  output: {
    publicPath: 'http://cdn.com.cn',  //打包之后需要加的路径
    filename: '[name].js', 
    path: path.resolve(__dirname, 'bundle') 
  }
}

The result after packaging: the result after the

backend joins the address packaging: