1-1.webpack究竟是什么？
webpack其实就是一个模块打包器。
1-2.什么是模块打包工具？
1-3.webpack的正确安装方式？
1-4.使用webpacl的配置文件
1-5.webpack打包的输出内容
2-1什么是loader？
loader其实就是一个打包的方案。
webpack本身是打包js文件的，但是遇到图片、样式、文件等等时，需要我们进行打包的时候，那么就需要借助其他插件来进行打包，那么除了需要安装依赖之外，还要在webpack.config.js进行配置。
下面是图片进行打包的例子：
第一安装file-loader，
npm install file-loader -D
第二配置webpack.config.js
module:{
rules:[{
test: /\.jpg$/,
use:{
loader: 'flie-loader'
}
}]
}
2-2试用loader打包静态资源（图片篇）
file-loader 或者 url-loader
module:{
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader', //file-loader
options:{
//placeholder 占位符
name:'[path][name].[ext]',
outputPath:'images/',
limit:1000
}
}
}]
}
2-3试用loader打包静态资源（样式篇-上）
style-loader、css-loader、sass-loader、node-sass、postcss-loader、autoprefixer
我们使用postcss-loader和autoprefixer两个插件的时候，可以帮我们自动加上css3的一些前缀，那么需要我们对webpack.config.js和postcss.config.js分别进行配置
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
webpack.config.js
module:{
rules: [{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
'postcss-loader'
]
}]
}
值得注意的是：
loader顺序不能随意写，有优先顺序的（从上到下，从右到左） 应该先是用autoprefixer和postcss-loader给样式添加前缀，其次采用sass-loader对scss文件进行转义为css，再采用css-loader,分析几个css之间的关系，在把这些css文件汇总合并到一个css文件中，最后style-loader再把生成css片段挂载到head里面的style中
2-4试用loader打包静态资源（样式篇-下）
1).importLoaders:2
2).modules:true
3).打包文字的时候使用：flie-loader
module:{
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',//file-loader
options:{
//placeholder 占位符
name:'[path][name].[ext]',
outputPath:'images/',
limit:1000
}
}
},{
test: /\.scss$/,
use: [
'style-loader',
// 'css-loader',
{
loader:'css-loader',
options: {
importLoaders: 2, //通过@import 引入的scss文件也会通过sass-loader和postcs-loader先处理再会来到css-loader这一步过程中
modules:true //样式模块化设置，单个页面的js文件中的样式不会影响到其他js页面中样式
}
},
'sass-loader',
'postcss-loader'
]
},{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use:{
loader:'file-loader'
}
}]
}
2-5 使用 plugins 让打包更便捷
plugin插件可以在webpack在运行到某一时刻的时候，帮助做一些事情
html-webpack-plugin:会在打包结束后，自动生成一个index.html文件，并且把打包生成的js自动引入到html中
clean-webpack-plugin:在进行打包的时候，先把dist目录下面的所有文件进行删除
2-6 Entry 与 Output 的基础配置
entry:后面可以跟一个入口文件的字符串，也可以跟一个对象
output:可以通过filename:'[name].js'设置来自动给entry设置的文件来定义输出文件名称，
如果不设置filename参数，那么main.js则是默认的文件名称会被生成
publicPath:如果生成的bundle.js 或者 dist.js 会放到cdn上面，那么我们在通过html-webpack-plugin自动生成html的时候，就要把bundle.js或者dist.js文件路径上添加远程cdn地址
// entry:'./index.js',
entry:{
main:'./index.js',//会自动生成main.js
sub:'./index.js'//会自动生成sub.js 生成的名称由参数名称决定
},
output: {
// filename: 'bundle.js',
filename:'[name].js',
publicPath:'http://www.cdn.com/'
path: path.resolve(__dirname,'dist')
},
2-7 SourceMap 的配置
sourceMap:
当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。
devtool:'cheap-module-eval-source-map' //适用于development环境
devtool:'cheap-module-source-map'//适用于production环境
source-map:会生成.map文件（bundle.js和其他js一个映射关系的一个map文件），速度比较慢
inline-source-map:也会生成map相关的代码，但是这些代码不是文件形式存在的，而是生成后放到main.js 或者bundle.js文件的末尾，速度比较慢
cheap:针对的是自己业务代码错误的一个校验提示,只提示你多少行出错了，不回提示你列出错
module:针对的是第三库错误的一个检验提示
eval:速度非常快，但是错误提示信息不回很全
2-8 使用 WebpackDevServer 提升开发效率
1).watch
2).webpack-dev-server
优点：
检测文件更改，
自动编译打包，
自动打开默认浏览器，
访问地址一个带有http的一个请求地址（便于ajax请求，在devServer的配置项中有一个proxy属性，这个属性可以实现跨域代理）
package.json配置如下：
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"start": "webpack-dev-server"
},
webpack.config.js配置如下：
devServer:{
contentBase:'./dist',
port: 8081,
open: true
},
学习链接地址：https://webpack.docschina.org/guides/development/
2-10 Hot Module Replacement 热模块更新
devServer:{
contentBase:'./dist',
port: 8081,
open: true,
hot: true, //需要配置
hotOnly: true////需要配置
},
plugins:[
new htmlWebpackPlugin({
template:'index.html'
}),
new cleanWebpackPlugin(['dist']),
new webpack.HotModuleReplacementPlugin() //需要配置的
]
网友评论