webpack自动化构建你的项目

Posted 2020-10-15 皮皮是只公喵

1.读万卷书，行万里路。

2.书山有路勤为径，学海无涯苦作舟。

技术段:

相信很多刚接触前端的小伙伴，对一些自动化工具会感觉无可下手。现在前端的发展的势头，势必和后台形成一个对立面，独挡一面。

这篇文章我就写一些关于webpack的东西，学的不深，后续深入学习再更新博客。

webpack是什么？为什么要使用webpack？其实做什么事都是一样的，一个东西的出现，必有它出现的意义。

webpack功能很多，当初接触webpack是因为在开发的过程中遇到一个问题，在版本迭代的时候会存在一个缓存的问题，就是当你更新

代码的时候，因为缓存的原因，你的新代码没能及时的上线，而功能就不会及时的呈现到用户面前。刚开始还不那么严重，到后面迭代

了很多个版本，这个问题一直存在，后面就有了关于webpack的学习。

这个我就只大概说一下整个流程，流程没有错，相信你会成功的把webpack的环境给安装成功。(网上有很多教程)

1.安装node.js。第一步肯定要装node.js这是webpack必须的开发环境，直接去node.js官网下载最新版本安装就可以了。

安装完可以在终端输入命令node -v检查安装的node.js的版本。

2.安装npm。这个也是必须安装的。npm是什么？建议你要去了解一下，这里推荐你一个纯技术网站，菜鸟教程。很适合新手。

在你开发项目的主目录打开终端，在终端输入 npm install --save-de 就可以安装了。你是不是在想为什么输入这个命令就可以了啊？

其实你不必奇怪，因为你安装了node.js，这些东西node.js里面的，你只是需要把它们下载到本地使用就可以了。不必惊讶。

3.后面就是安装很多很多的插件，记住这些插件也是在node.js里面下载的，我们只需要输入命令下载就可以了。

插件一：npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

插件二：npm install --save-dev style-loader css-loader

安装webpack:npm install --save-dev webpack-dev-server

在当前目录运行打包代码:npm run qzq  （运行的命令）

 

下面是一些文件的配置：

2、package.json配置内容
{
"name": "daka",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"bdtt": "webpack --config webpack.bdtt.config.js",
"daka": "webpack --config webpack.daka.config.js",
"dakaSuccess": "webpack --config webpack.dakaSuccess.config.js",
"qzq": "webpack --config webpack.qzq.config.js"
},
"author": "zhang",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.3",
"babel": "^6.23.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"install": "^0.10.1",
"jquery": "^3.2.1",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"npm": "^5.3.0",
"postcss-loader": "^2.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
},
"description": "wxy",
"dependencies": {
"webpack": "^3.5.5"
}
}
3、webpack.qzq.co3、webpack.qzq.co3、webpack.qzq.config.js内容
// 一个常见的`webpack`配置文件
const webpack = require(‘webpack‘);
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
var CleanPlugin = require(‘clean-webpack-plugin‘);
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var autoprefixer = require(‘autoprefixer‘);

module.exports = {
entry: {
‘zmQzq‘:__dirname + "/require/qzq/zm_qzq.js",
‘zmMine‘:__dirname + "/require/qzq/zm_mine.js",

},
output: {
path: __dirname + "/build/qzq",
filename: "[name].js"
},
devtool: ‘none‘,
devServer: {
contentBase: "./",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true,
hot: true
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test:/.(png)|(jpg)$/,
loader: "url-loader?limit=8192"
}
]
},
plugins: [
new CleanPlugin([‘build‘], {
root: ‘/Users/huizhang/web-git/apps/newproject/build/qzq‘,
// root: ‘D:/web/apps/newproject/build‘,
verbose: true,
dry: false //false表示删除
/* 排除 exclude: [‘shared.js‘]*/
}), //清空目录
new ExtractTextPlugin("[name].css"),
new HtmlWebpackPlugin({
filename: __dirname + ‘/resource/zm_insurance/zm_list.html‘, //这个路径要相对于output.path输出的JS设置 在JS的上一级就用 ../../
chunks: [‘zmQzq‘], //限定这个模板只引入index 和公用部分JS common.js
hash: true, // 为静态资源生成hash值 在引入资源地址后加上?hash值 实现不修改文件名加版本号功能
xhtml: true, // 需要符合xhtml的标准
inject: ‘body‘,
template: __dirname + ‘/resource/zm_insurance/zm_list.ejs‘ //模板地址
}),
new HtmlWebpackPlugin({
filename: __dirname + ‘/resource/zm_insurance/zm_mine.html‘, //这个路径要相对于output.path输出的JS设置 在JS的上一级就用 ../../
chunks: [‘zmMine‘], //限定这个模板只引入index 和公用部分JS common.js
hash: true, // 为静态资源生成hash值 在引入资源地址后加上?hash值 实现不修改文件名加版本号功能
xhtml: true, // 需要符合xhtml的标准
inject: ‘body‘,
template: __dirname + ‘/resource/zm_insurance/zm_mine.ejs‘ //模板地址
})
]
};