关于webpack
Webpack是一个模块打包器。它的目的是（根据它们之间的依赖）合并一组模块。它的输出可能是一个或多个文件。在很久之前，除了使用<script>标签，我们没有其他方法把浏览器使用的JavaScript拆分到多个文件。我们需要把用到的每一个JavaScript源文件链接放到HTML代码里。这样并不方便。所以webpack的出现帮我们解决了这样的问题。
一、新建一个test2项目
>test2
>app
index.js
sub.js
二、VScode里面打开test2项目，终端安装webpack
npm install -g webpack
三、初始化
npm init //一路回车
执行完会在根目录下生成一个package.json文件夹
四、sub.js
function generateText(){
var element = document.createElement('h2');
element.innerHTML = 'hello h2 world';
return element
}
module.exports = generateText
五、index.js
var sub = require('./sub');
var app = document.createElement('div');
app.innerHTML = '<h1>hello world</h1>';
app.appendChild(sub());
document.body.appendChild(app);
六、安装一个可以自动快速帮我们生成html的插件
npm install html-webpack-plugin --save-dev
七、在根目录下新建一个配置文件 webpack.config.js
var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定义一些文件路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'APP');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
module.exports = {
entry: APP_PATH,
output: {
path: BUILD_PATH,
filename: 'bundle.js'
},
plugins: [
new HtmlwebpackPlugin({
title: 'Hello Webpack'
})
]
}
八、终端输入webpack执行
D:\尝试\webpack\test2>webpack
这个时候可能会报错，说没安装webpack或者没安装webpack-cli，按照提示安装即可
npm install -D webpack npm install -D webpack-cli
此时如果还报错，类似
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
可以检查下webpack.config.js文件里面有没有单词拼写错误。
成功执行后，会生成一个build文件，此时就完成了webpack主要的工作：
生成html
合并js
html引入js
js被执行
九、至此，我们其实已经生成了html文件，但是还没办法在浏览器看到。这时，我们通过webpack-dev-server来让我们在浏览器查看效果。
1. 终端执行
npm install webpack-dev-server --save-dev
2. 在webpack.config.js中配置
module.exports = {
....
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
},
...
}
3. 在package.json里配置
"scripts": { "start": "webpack-dev-server --hot --inline" },
4. 终端运行
npm start
5. 这时候可能会因为webpack-cli版本问题导致报错
Cannot find module 'webpack-cli/bin/config-yargs'
解决办法，卸载当前webpack-cli，安装更低版本的webpack-cli
十、css模块化
1. 安装style-loader,css-loader
npm install css-loader style-loader --save-dev
PS:webapck是用JS写的，运行在node环境，所以默认webpack打包的时候只会处理JS之间的依赖关系，所以css这样的就需要webpac使用css-loader或者style-loader去处理。
如果JS中引入了css,就需要使用css-loader来识别这个模块，通过特定的语法规则进行转换内容最后导出。css-loader导出的是一个数组：
//base.css
.bg{ background: #000; }
const style = require('./base.css') console.log(style, 'css')
css-loader导出后为：
clipboard.png
此时我们就需要用到style-loader来处理。style-loader通过一个js脚本创建一个style标签,里面包含一些样式。style-loader不能单独使用，因为它并不复杂解析css之前的依赖关系，每个loader的功能都是单一的，各自拆分独立的。
2. 配置webpack.config.js
module.exports = {
//...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] //注意，这里应该先处理css-loader在处理style-loader,但是由于处理顺序是从右往左的，所以style-loader写在前面。
}
]
}
}
3. 在跟目录下新增一个 main.css文件
h1{ color: red }
14. 在入口文件 index.js 中引入main.css
//index.js
import '../main.css'
5. npm start 运行可以看到标题已经是红色了
十一、less模块化
1. 安装less和less-loader (也需要安装css-loader和style-loader,上面已经安装过了)
npm install less --save-dev npm install less-loader --save-dev
2. 配置webpack.config.js
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}
3. 根目录下新建文件 style.less 和 main.less
//style.less
@red: red; // ;一定不能掉
//main.less
@import 'style.less';
h1{
color: @red;
}
4. 入口文件 index.js 中引入main.less
//index.js
import '../main.less';
5. npm start运行，此时页面上的标题应该变为了红色
十二、webpack处理图片等静态资源
1. 安装url-loader和file-loader
npm install url-loader --save-dev npm install file-loader --save-dev
2. 配置webpack-config.js
module: {
{
test: /\.(png|jpg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1 //控制是否转为base64格式
}
}
]
}
}
//或者
module: {
{
test: /\.(png|jpg)$/,
use: 'url-loader?limit=1&name=[hash:8]-[name].[ext]'
}
}
3. 在根目录下新建img目录，里面添加一张img1.png图片，并在main.less文件中引用
//main.less
@import "style.less";
h1{
color: @green;
background: url('./img/img1.png');
}
十三、webpack中添加第三方库
以jquery为例
1. 安装jquery
npm install jquery --save-dev
2. 在入口文件index.js中引用
var $ = require('jquery')
$('body').append('<p>jquery 引入成功</p>');
