Webpack 的核心概念
看完这篇还搞不懂webpack，求你打我 - 简书 (jianshu.com)
1，静态资源打包
file-loader
npm install --save-dev file-loader module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', options: { name:'[path]_[name]_[hash].[ext]',//为你的文件配置自定义文件名模板 publicPath:'images/'//为你的文件配置自定义 public 发布目录 outputPath:'images/'//为你的文件配置自定义 output 输出目录 } } ] } ] } }
url-loader
npm install --save-dev url-loader module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192 //设置文件大小 } } ] } ] } }
style-loader
npm install style-loader --save-dev
npm install sass-loader node-sass --save-dev
npm i -D postcss-loader
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },// 将 JS 字符串生成为 style 节点
{ loader: "css-loader"
options:{
importLoader:2;//因为下面有sass-loader和postcss-loader,所以代码编译的时候是从上到下从右到左开始编译
modules:true //是否启用css模块规范
}
}，// 将 CSS 转化成 CommonJS 模块
{ loader: "sass-loader" }，// 将 Sass 编译成 CSS
{ loader: "postcss-loader" },//责进一步处理 CSS 文件，比如添加浏览器前缀，压缩 CSS
]
}
]
}
}
webpack中如何使用iconfont字体图标
打开iconfont.css文件，原本的字体文件引用路径是用的css的方式，即下面图片中所示的
- 同级目录：直接用文件名
- 上一级目录：../
但是，我们是在webpack环境下使用，所以要改成webpack引用规则，即改成下面图片所示
- 同级目录： ./
- 上一级目录： ../
2.配置如何加载woff等字体文件
大家都知道webpack要配置loader，声明如何加载某类文件，所以我们要在config中声明一下
使用之前要安装url-loader、file-loader
在webpack的配置文件的loaders中配置
字体文件最后会以字符的形式保存在css文件中
plugins插件
npm install --save-dev html-webpack-plugin //会在打包结束后自动生成一个HTML文件，并把打包生成的js文件自动引入到这个HTML文件中
npm install --save-dev clean-webpack-plugin //清除上一次打包的文件
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin(
template：'src/index.html
),new CleanWebpackPlugin(['dist'])]}
entry output 入口出口文件
const path = require('path')
...
module.exports = {
mode: 'production'，
//1.增加映射文件，可以帮我们调试源代码
devtool:'source-map'
//2.不会产生单独的文件，但是可以显示行和列
devtool: 'eval-source-map'
//3.不会产生列，但是是一个单独的映射文件，产生后可以保留起来，便于调试
devtool: 'cheap-module-source-map' //用的不是很多
//不会产生文件，而是集成在打包后的文件中，不会产生列
devtool:'cheap-module-eval-source-map'
entry: { "app.bundle": './src'，
main:./src/index.js'//这个是默认的出口文件
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: 'https://cdn.example.com/assets/[fullhash]/'//这个是打包后的cdn配置 filename: '[name].[chunkhash].js' }, ... };
webpack-dev-server
webpack-dev-middleware
webpack-dev-middleware 是一个封装器(wrapper)，它可以把 webpack 处理过的文件发送到一个 server。 webpack-dev-server 在内部使用了它，然而它也可以作为一个单独的 package 来使用，以便根据需求进行更多自定义设置。下面是一个 webpack-dev-middleware 配合 express server 的示例。
HotModuleReplacementPlugin 热更新
webpack里使用babel
// 已经在项目里安装了webpack的情况下
npm install --save-dev babel-loader babel-core babel-preset-env
transform-runtime解决代码重复问题
①在打包的过程中，babel会在包里提供一些工具函数，而这些工具函数可能会重复的出现在多个模块。
②这样会导致打包的体积过大，所以babel提供了babel-transform-runtime解决这个体积过大的问题
③安装依赖
npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save
// 该文件其实最终是要在node环境下执行的
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
// 导出一个具有特殊属性配置的对象
module.exports = {
entry:['babel-polyfill','./src/main.js'],/* 入口文件模块路径 */
output:{
path:path.join(__dirname,'./dist/'),/* 出口文件模块所属目录，必须是一个绝对路径 */
filename:'bundle.js'/* 打包的结果文件名称 */
},
devServer:{
// 配置webpack-dev-server的www目录
contentBase:'./dist'
},
plugins:[
// 该插件可以把index.html打包到bundle.js文件所属目录，跟着bundle走
// 同时也会自动在index.html中注入script引用链接，并且引用的资源名称，也取决于打包的文件名称
new htmlWebpackPlugin({
template:'./index.html'
})
],
module:{
rules:[
{
test:/.css$/,
use:[
//注意：这里的顺序很重要，不要乱了顺序
'style-loader',
'css-loader'
]
},
{
test:/.(jpg|png|gif|svg)$/,
use:[
'file-loader'
]
},
{
test:/\.js$/,
exclude:/(node_modules|bower_components)/,//排除掉node_module目录
use:{
loader:'babel-loader',
options:{
cacheDriectory:true,//配置cacheDirectory可以节省webpack打包编译时间，默认把打包的结果缓存到node_modules/.cache模块下
presets:['env'], //转码规则
plugins:['transform-runtime']
}
}
}
]
}
}
