时间:2021-07-01 10:21:17 帮助过:10人阅读
机会总是留给有准备的人,要想在这兵荒马乱的求职季里出类拔萃,拿下你心中期待已久的offer。那么你更因该知道很多别人不知道的东西,你的羽翼才能丰满,才能翱翔于天际。鹰击长空,靠的不是天生,而是年少时断崖之险。笨鸟先飞,靠的不是智慧,而是孜孜不倦的努力。
webpack是一个打包工具,他的宗旨是一切静态资源即可打包。有人就会问为什么要webpack?webpack是现代前端技术的基石,常规的开发方式,比如jquery,html,css静态网页开发已经落后了。现在是MVVM的时代,数据驱动界面。webpack将现代js开发中的各种新型有用的技术,集合打包。webpack的描述铺天盖地,我就不浪费大家的时间了。理解下这种图就知道webpack的生态圈了:
const path = require('path'); //引入node的path模块 const webpack = require('webpack'); //引入的webpack,使用lodash const HtmlWebpackPlugin = require('html-webpack-plugin') //将html打包 const ExtractTextPlugin = require('extract-text-webpack-plugin') //打包的css拆分,将一部分抽离出来 const CopyWebpackPlugin = require('copy-webpack-plugin') // console.log(path.resolve(__dirname,'dist')); //物理地址拼接 module.exports = { entry: './src/index.js', //入口文件 在vue-cli main.js output: { //webpack如何输出 path: path.resolve(__dirname, 'dist'), //定位,输出文件的目标路径 filename: '[name].js' }, module: { //模块的相关配置 rules: [ //根据文件的后缀提供一个loader,解析规则 { test: /\.js$/, //es6 => es5 include: [ path.resolve(__dirname, 'src') ], // exclude:[], 不匹配选项(优先级高于test和include) use: 'babel-loader' }, { test: /\.less$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ 'css-loader', 'less-loader' ] }) }, { //图片loader test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader' //根据文件地址加载文件 } ] } ] }, resolve: { //解析模块的可选项 // modules: [ ]//模块的查找目录 配置其他的css等文件 extensions: [".js", ".json", ".jsx",".less", ".css"], //用到文件的扩展名 alias: { //模快别名列表 utils: path.resolve(__dirname,'src/utils') } }, plugins: [ //插进的引用, 压缩,分离美化 new ExtractTextPlugin('[name].css'), //[name] 默认 也可以自定义name 声明使用 new HtmlWebpackPlugin({ //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上,项目包。可以直接上线 file: 'index.html', //打造单页面运用 最后运行的不是这个 template: 'src/index.html' //vue-cli放在跟目录下 }), new CopyWebpackPlugin([ //src下其他的文件直接复制到dist目录下 { from:'src/assets/favicon.ico',to: 'favicon.ico' } ]), new webpack.ProvidePlugin({ //引用框架 jquery lodash工具库是很多组件会复用的,省去了import '_': 'lodash' //引用webpack }) ], devServer: { //服务于webpack-dev-server 内部封装了一个express port: '8080', before(app) { app.get('/api/test.json', (req, res) => { res.json({ code: 200, message: 'Hello World' }) }) } } }
我们使用npm或yarn来安装webpack
npm install webpack webpack-cli -g # 或者 yarn global add webpack webpack-cli
为什么webpack会分为两个文件呢?在webpack3中,webpack本身和它的cli以前都是在同一个包中,但在第4版中,他们已经将两者分开来更好地管理它们。
新建一个webpack的文件夹,在其下新建一个try-webpack(防止init时项目名和安装包同名)并初始化和配置webpack。
npm init -y //-y 默认所有的配置 yarn add webpack webpack-cli -D //-D webpack安装在devDependencies环境中
在上面搭建好的环境项目中,我们来到package.json里配置我们的scripts,让webpack
"scripts": { "build": "webpack --mode production" //我们在这里配置,就可以使用npm run build 启动我们的webpack }, "devDependencies": { "webpack": "^4.16.0", "webpack-cli": "^3.0.8" }
配置好我们webpack的运行环境时,联想下vue-cli。平时使用vue-cli会自动帮我们配置并生成项目。我们在src下进行项目的开发,最后npm run build 打包生成我们的dist的目录。不知道你是否还记得,还是让我们进入下一节让我们感受下这其中的正个流程吧。
在我们的根项目下try-webpack新建一个src目录。在src目录下新建一个index.js文件。在里面我们可以写任意的代码,以案例为主:
const a = 1;
写完之后我们在终端运行我们的命令 npm run build;你就会发现新增了一个dist目录,里面存放着webpack打包好的main.js文件。这和我们在vue-cli里操作是一样的。
我们在开发是一般会打包src下的什么文件呢?我们可以回忆一下,其实vue-cli项目src下不就这几点嘛:
发布时需要的html,css,js
css预编译器stylus,less,sass
es6的高级语法
图片资源.png,.gif,.ico,.jpg
文件间的require
别名@等修饰符
那么我将会分这几点来讲解webpack中webpack.config.js的配置,跟着脚步,一步一步的来完成我们的流程线。
在项目的根目录try-webpack下新建webpack.config.js文件,以commonJS模块化机制向外输出,并且新建一个index.html。
module.exports = {}
配置我们的入口entry,在vue-cli里相当于跟目录下的main.js,我们的出口output。我们可以把webpack理解为一个工厂,进入相当于把各种各样的原料放进我们的工厂了,然后工厂进行一系列的打包操作把打包好的东西,向外输出,然后就可以去出售了(上线)。
const path = require('path'); //引入我们的node模块里的path //测试下 console.log(path.resolve(__dirname,'dist')); //物理地址拼接 module.exports = { entry: './src/index.js', //入口文件 在vue-cli main.js output: { //webpack如何向外输出 path: path.resolve(__dirname, 'dist'),//定位,输出文件的目标路径 filename: '[name].js' //文件名[name].js默认,也可自行配置 },
HTML打包我们需要安装引入html-webpack-plugin
yarn add html-webpack-plugin -D //在开发环境中安装 const HtmlWebpackPlugin = require('html-webpack-plugin') //引入打包我们的HTML
在module.exports里配置我们的plugins(插件):
plugins: [ //插进的引用, 压缩,分离美化 new HtmlWebpackPlugin({ //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上,项目包。可以直接上线 file: 'index.html', //打造单页面运用 最后运行的不是这个 template: 'src/index.html' //vue-cli放在跟目录下 }), ],
配置好后,在终端输入npm run dev后webpack将我们的html打包好并且自动将我们的js引进来了。
<body> <p class="main">Hello World</p> <script type="text/javascript" src="main.js"></script> </body>
live-sever我们的dist目录,启动一个8080端口,我们就可以看到我们的Hello World了。这就是我们上线版的页面。
以上就是对于webpack4.0配置的详解的详细内容,更多请关注Gxl网其它相关文章!