一、使用Webpack的配置文件
文件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、webpack默认配置文件命名为webpack.config.js，在配置完成之后，使用命令npx webpack可打包文件。
2、如果配置文件的命名是其他形式，例如是：webpackconfig.js，可以使用命令npx webpack --config webpackconfig.js来打包文件。
3、可以在package.json文件中添加：
"script": {
"bundle": "webpack"
}
然后使用npm run bundle命令进行打包。
二、浅析Webpack打包输出内容
文件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') //打包后文件所存放的位置
}
}
三、什么是Loader（对于特定的文件定义如何打包）
loader就是webpack用来预处理模块的，在一个模块被引入之前，会预先使用loader处理模块的内容
module.exports = {
module: {
rules: [{
test: /\.(jpg|png|gif)$/, //以.jpg结尾的文件
use: {
loader: 'file-loader',
options: {
name: '[name]_[hash].[ext]', //打包后文件名称和后缀与打包前一致
outputPath: 'images/'
}
}
}]
}
}
使用此loader需要用命令npm install file-loader -D来安装此loader。
module.exports = {
module: {
rules: [{
test: /\.js$/, //以.js结尾的文件
use: [{
loader: 'babel-loader',
options:{
presets:['react'] // 预设处理里面的内容是jsx的，需要npm i -D babel-preset-react
}
}]
}]
}
}
使用此loader需要用命令npm install babel-loader babel-core -D来安装此loader，此loader是用来处理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文件中，大于才会生成文件
}
}
}]
}
}
使用此loader需要用命令npm install url-loader -D来安装此loader。
四、使用Loader打包静态资源
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、使用此sass-loader需要用命令npm install sass-loader node-sass -D来安装此loader。
2、使用postcss-loader:给自己写的css添加需要的前缀。使用此模块需要新建一个文件postcss.config.js，此文件与webpack.config.js在同一目录，在里面添加：
module.exports = {
plugins: [
require('autoprefixer')
]
}
给项目添加此模块使用命令npm install autoprefixer -D
3、如果加入modules: true，则引入sass方式改变为：import style from ‘./index.sass’; 使用方法为style.avatar
五、使用plugins让打包更便捷
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文件中的内容删除
)]
}
使用命令 npm i html-webpack-plugin -D来安装
六、Entry与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')
}
}
打包之后的结果：
后端加入地址打包之后的结果：
