webpack4.x详细配置步骤
文章平均质量分 82
IQkevin
Thirst for knowledge make your world more and more broad
展开
-
webpack4.x配置01:项目准备工作
工作环境准备安装 node npm Git vscodenode.jshttp://nodejs.cn/ http://nodejs.org/#download 使用这些技术,node.js 是必须的,从官网下载并安装到自己的电脑,你需要配置并知道自己把它安装到了哪里,我的安装目录:D:/nodenpm通常安装过 node 后就会自动安装了 npm,node 安装成功后,wi...原创 2019-03-20 21:11:25 · 350 阅读 · 0 评论 -
webpack4配置之——15:模版解析配置项
如果你喜欢这系列的文章,欢迎star我的项目,源码地址,点击这里模板解析配置项webpack 还有一个配置项 resolve 它有很多配置项,具体可以看 https://webpack.js.org/configuration/resolve/下面三项是我觉得特别有用的:// 模版解析配置项resolve: { // 设置可省略文件后缀名 extensions: [' '...原创 2019-03-21 18:40:43 · 220 阅读 · 0 评论 -
webpack4配置之——16:viewport适配移动端
移动端适配配置这里将之前的优化框架相关内容删除了,框架上的东西在看过我这之前的文章后,应该对webpack 已经有了了解,那么在这个基础上,去看vue-cli或者create-react-app,看它们的 webpack 配置,起码能知道该如何去修改了,在它们的基础上,去搭配出适合自己项目的脚手架。本文将主要记录下我在使用 viewport 适配移动端时,学习的一些东西~移动端首先最重要的是...原创 2019-03-21 18:41:10 · 789 阅读 · 0 评论 -
webpack4配置之——17:yarn替代npm方案
如果你喜欢这系列的文章,欢迎star我的项目,源码地址,点击这里yarn 比 npm 更优秀过去的很长一段时间内,一直都在使用npm 安装各种插件包,但是,出错率实在是太大了~ 各种意想不到的问题层出不穷,只一个node-sass 就够让人受的了~ 更别说,用npm 安装插件包,还总是会出现漏装依赖插件的情况,在使用过yarn后就再也不想用npm了~npm install yarn -g...原创 2019-03-21 18:41:42 · 445 阅读 · 0 评论 -
webpack4配置之——18:html-loader与HtmlWebpackPlugin的冲突
如果你喜欢这系列的文章,欢迎star我的项目,源码地址,点击这里html-loader与HtmlWebpackPlugin的冲突在配置图片那篇文章中,用到了html-loader,当时只看到了html文件中引用的图片被加载出来了,但是却没发现HtmlWebpackPlugin插件在解析html 文件时,ejs语法却未正常解析出来,这里我设置了标题是通过ejs语法获取的HtmlWebpackPl...原创 2019-03-21 18:42:21 · 9579 阅读 · 3 评论 -
webpack4配置之——19:引入第三方插件库
如果你喜欢这系列的文章,欢迎star我的项目,源码地址,点击这里引入npm包管理的第三方插件库对于第三方插件库,用到最多的莫过于jquery了~,就先以jquery为例,因为是要全局使用,所以需要将其暴露给全局,网上有很多种配置方法,但是觉得最靠谱的应该就是接下来要介绍的这种,需要使用到expose-loader:yarn add jquery -Syarn add expose-load...原创 2019-03-21 18:42:52 · 934 阅读 · 0 评论 -
webpack4配置之——20:发布并预览测试及生产环境
发布测试及生产环境一个项目从开发到测试到上线,这个过程的三个阶段,需要三个环境的代码,也就需要三套webpack配置文件开发环境(webpack.dev.conf.js):怎么方便怎么来~,想怎么配置就怎么配置;测试环境(webpack.test.conf.js):测试环境的配置与生产环境要一致,以达到在测试环境还原生产环境BUG的目的,其与生产环境不同之处在于,测试环境打包可以不用压缩,...原创 2019-03-21 18:43:13 · 738 阅读 · 0 评论 -
webpack4配置之——21:生产环境打包静态资源
如果你喜欢这系列的文章,欢迎star我的项目,源码地址,点击这里生产环境打包静态资源一个完整的项目,不仅有开发依赖的各种文件需要打包上传到服务器上,也许还会有各种开发文档,项目中没引用过的图片、设计图、或者会有一些静态页面不需要编译,也要上传到服务器上,以方便预览。这里就需要用到插件copy-webpack-plugin,首先下载该插件:yarn add copy-webpack-plug...原创 2019-04-04 16:01:21 · 2668 阅读 · 0 评论 -
webpack4配置之——22:辅助插件-cross-env、friendly-errors-webpack-plugin、node-notifier、webpack-bundle-analyzer
如果你喜欢这系列的文章,欢迎star我的项目,源码地址,点击这里cross-envyarn add cross-env -Dcross-env 能够跨平台的设置及使用环境变量,修改package.json 文件的命令:"dev": "cross-env NODE_ENV=development webpack --config webpack.dev.conf.js","start":...原创 2019-04-04 16:03:56 · 1714 阅读 · 0 评论 -
webpack4配置之——23:细说webpack4引入第三方库
如果你喜欢这系列的文章,欢迎star我的项目,源码地址,点击这里webpack4 对 JS 文件的引入在本项目的第19章引入第三方插件库中,已经说过一种对 JS 的引入方法,就是使用 expose-loader,而对非npm 包的引入也在那一章做过介绍,那么引入第三方插件并不是只有那一种办法,这里主要介绍一下其他的引入方法。其实不用expose-loader也能引入,也能用,只是不够完美,这...原创 2019-04-04 16:05:29 · 1921 阅读 · 0 评论 -
webpack4配置之——24:细说webpack4打包及拆分代码
如果你喜欢这系列的文章,欢迎star我的项目,源码地址,点击这里webpack4.x打包拆分在第14章开发、生产环境的拆分代码中,其实已经对webpack4.x的打包拆分,做过简单的介绍,但是在当时我对这一块其实也是一脸懵逼状态,只知道是这样配置的,但是具体该如何操作也是不清楚的,这里会略微细说一下,当然也只是个人了解到的了在上一章中,说到过对第三方插件库的打包问题,说到了打包速度和打包后包...原创 2019-04-04 16:06:40 · 3324 阅读 · 0 评论 -
webpack4配置之——25:webpack引入eslint
如果你喜欢这系列的文章,欢迎star我的项目,源码地址,点击这里webpack 引入 eslint首先安装webpack支持eslint三件套:yarn add eslint eslint-loader eslint-friendly-formatter -D然后修改webpack.dev.conf.js文件,添加如下rule:{ test: /\.js$/, use:...原创 2019-04-04 16:07:49 · 3064 阅读 · 0 评论 -
webpack4配置之——14:开发、生产环境的拆分代码
如果你喜欢这系列的文章,欢迎star我的项目,源码地址,点击这里开发、生产环境的拆分代码目前我们打包的 js 代码,都在一个文件内,这会让这个文件变得非常大项目中不可避免要使用第三方库,比如:Jquery react vue 等等,这些在项目上线后,依然需要依赖的库相关的 JS 代码,我们需要单独拆分出来,并打包到一个文件内,这些代码因为基不会发生改变,所以单独分离出来,因为有了缓存的缘故,...原创 2019-03-21 18:40:18 · 549 阅读 · 0 评论 -
webpack4配置之——13:生产环境代码压缩
如果你喜欢这系列的文章,欢迎star我的项目,源码地址,点击这里生产环境代码压缩虽说生产环境只要配置了 mode:"production" 就能实现 js 的代码压缩,但我们不仅要压缩 js 代码,还需要压缩 css html 文件可以先打开 bin/css/app.css 文件,会发现,css 文件格式是未压缩的之前的章节中已经抽取了 css 文件,用到了 mini-css-extrac...原创 2019-03-21 18:39:46 · 3146 阅读 · 0 评论 -
webpack4.x配置02:配置基础的开发环境webpack
项目初始化 package.json 文件新建一个项目文件夹并用 vscode 打开该文件夹,作为项目根目录文件夹打开 vscode 的终端命令行,开始初始化 package.json 文件npm init -y当然,也可以不加最后的 -y ,那样的话,跟着命令行提示一步一步走,按提示可以输入自己的配置加上 -y ,省去这些步骤,直接在根目录生成 package.j...原创 2019-03-20 21:15:53 · 410 阅读 · 1 评论 -
webpack4.x配置03:HtmlWebpackPlugin
html-webpack-plugin上一章我们在 dist 目录下创建了一个 index.html 文件,并且手动在里面引入了我们生成的 bundle.js 文件这里需要知道,dist 整个文件夹和里面的内容,我们之前是没有手动创建的,这个是我们执行命令后,自动创建的,dist 目录属于构建目录,是我们源码的输出目录,我们希望里面的一切都是可以自动化的,包括 index.html 文件也能自...原创 2019-03-20 21:16:37 · 892 阅读 · 0 评论 -
webpack4.x配置04:配置开发服务
开发服务此前,我们要浏览页面都是在项目文件夹中,直接点击要浏览的文件,在浏览器中打开浏览,但是这种浏览方式还是太麻烦,而且,如果是移动端开发,想在手机上预览效果,就没有办法了,开了服务,我们可以通过本地服务浏览文件,也能在手机预览开发效果。这就需要用到 webpack-dev-server 插件了安装 webpack-dev-servernpm install webpack-dev-se...原创 2019-03-20 21:17:16 · 283 阅读 · 0 评论 -
webpack4配置之——05:获取ip并打开浏览器
打开浏览器在此之前,在浏览器打开项目,我们都需要,到文件夹去找 dist/index.html 直接打开,启动服务后,需要复制 http://localhost:8080 到浏览器打开在这里,可以省去这些步骤,在启动服务后,直接自动在默认浏览器打开项目预览安装相关插件npm install opn chalk -D更新 webpack.dev.conf.js 文件,文件顶部先引入插件...原创 2019-03-20 21:17:47 · 1457 阅读 · 0 评论 -
webpack4配置之——06:配置样式-css、postcss、scss、less
编译 CSS 文件处理 css 的相关技术有 postcss、 scss、less,接下来,会一一介绍.css 文件的编译编译 .css 文件,需要用到 css-loader 和 style-loadercss-loader 使你能够使用类似 @import 和 url(...) 的方法实现 require() 的功能;style-loader 将所有的计算后的样式加入页面中; 二者组合...原创 2019-03-20 21:18:26 · 3535 阅读 · 0 评论 -
webpack4配置之——07:配置图片、文件、图标文字
配置图片依赖图片的打包编译使用了 url-loader,file-loader,html-loader 依赖npm install url-loader file-loader html-loader -D更新 webpack.dev.conf.js 文件,添加图片依赖{ test: /\.(png|jp?g|gif|svg)$/, use: [ { ...原创 2019-03-20 21:19:09 · 497 阅读 · 0 评论 -
webpack4配置之——08:初步优化开发环境
优化项开发调试所用的 sourcemapjs 文件增加 hash 值,方便缓存配置模块热更新增加 sourcemap开发过程中,代码出错是难免的,那么调试就很重要了,webpack 帮我们打包所有文件,省了我们很多事情,但打包后的代码,却不适合用来调试,可以通过在 webpack 中增加 devtool 配置,来向浏览器暴露我们的源码,让我们可以在源码的基础上,进行调试...原创 2019-03-20 21:19:35 · 210 阅读 · 0 评论 -
webpack4配置之——09:配置babel7
安装 babel 相关插件npm install babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime -D项目根目录添加 .babelrc 文件在 .babelrc 文件中加入以下代码:{ "presets": [ ["@babel/preset-e...原创 2019-03-20 21:20:02 · 3541 阅读 · 0 评论 -
webpack4配置之——10:配置生产环境webpack
配置生产环境根目录下新建一个 webpack.prod.conf.js 文件先将 webpack.dev.conf.js 文件的内容,全部复制到该文件中然后我们需要做以下几处修改:删除 devServer 配置项的代码出口配置 filename: 'js/[name].[hash].js' 改为 filename: 'js/[name].[chunkhash].js', 开发环境设置为...原创 2019-03-20 21:20:22 · 305 阅读 · 0 评论 -
webpack4配置之——11:分离css
如果你喜欢这系列的文章,欢迎star我的项目,源码地址,点击这里分离 css在之前的版本中,分离 css 一直用的是 extract-text-webpack-plugin,但是如果在 webpack4.x 上继续使用,你会发现它会报错的,要想继续使用这个插件,必须 npm i extract-text-webpack-plugin@next -D 才可以,这样下载的就是最新的版本,而不是稳定...原创 2019-03-21 18:38:34 · 570 阅读 · 0 评论 -
webpack4配置之——12:CleanWebpackPlugin
如果你喜欢这系列的文章,欢迎star我的项目,源码地址,点击这里clean-webpack-plugin在上一章我们把 css 单独抽离出来,但是打开 js 文件夹,会发现,这里有两个 app.js 文件,只是 hash 值不同而已,打开 dist/index.html 文件,发现其引用了其中的一个,也就是说,另一个是完全没用的,当我们修改入口文件的 js 代码,再次执行 npm run bu...原创 2019-03-21 18:39:11 · 2614 阅读 · 0 评论 -
webpack4配置之——26:postcss-loader遇到的坑
如果你喜欢这系列的文章,欢迎star我的项目,源码地址,点击这里postcss.config.js 文件的数据格式问题在我配置vue项目时,需要用vue-loader配合postcss-loader做配置时,发现了本项目存在的一个问题:我在postcss.config.js中配置了parser:'postcss-scss',这里在未配置vue-loader之前,只有css,scss,less...原创 2019-04-08 21:27:36 · 15635 阅读 · 0 评论