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，目录结构复杂后会很烦...
打最干净的包！
开发时每次打包，可能都会有一些弃用的东西，如果要保持打出的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' }) ],