webpack4学习记录
写这篇对webpack的基本概念和安装等简单操作省略,主要是记录在跟着官方文档学习webpack时的一些要点。
前端写代码时，HTML页面中用<script>标签引入的一些外部js文件，来支持代码运行，这些js文件就是项目的“依赖”。webpack就是用了打包管理这些依赖的工具。
-
为什么是npm run build?
你用vue-cli的时候，总是用npm run build来打包写好的代码，然后代码很成功的被打包到了dist目录下。这些都是因为webpack在配置文件webpack.config.js中设置好的。
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};设置好出口和入口文件的名字位置等，在package.json中添加npm脚本命令build，以后你用npm run build，其实就是执行了webpack。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},管理非JavaScript文件
webpack打包是很厉害,不过它本身只能识别JavaScript文件,对于前端开发中的css,图片,字体等静态资源,就需要各种loader来将其转化为最终依赖图可以引用的模块。
loader需要配置两个选项：test和use，tset确定需要loader转化的文件，use确定用哪个loader转化，在使用之前，外部loader需要npm intsall一下。
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|jpg|svg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]
}-
我原来用<script src='xxx.js'>也可以啊
一个项目中有多个js文件，如果需要在一个js中用到另一个js的方法，在没有ES模块这些东西时，需要把整个js文件引入到html页面中，而且顺序不能出错，好麻烦的。但是用了webpack，它就可以自己去根据一个入口js寻找依赖，再配合模块化的写法，导入你需要的功能，这样就可以方便大家更好的组织代码。
不用webpack，目录结构复杂后会很烦...
用了webpack，超清晰!
打最干净的包！
开发时每次打包，可能都会有一些弃用的东西，如果要保持打出的dist是最小的包，就使用下面这两个插件来管理输出。
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpckPlugin = require('clean-webpack-plugin')
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
new CleanWebpckPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
转播
