说明

源代码
本篇主要对发布环境的配置说明
前面2点是对webpack的一个复习.
第3点开始,逐步配置部署代码

1. Webpack发布的策略

2.1 在实际开发中,一般会有两套方案:

开发期间的项目:包含了测试文件、测试数据、开发工具、测试工具等相关配置,有利于项目的开发和测试,但是这些文件仅用于开发,发布项目的时候需要删除
部署期间的项目,剔除了那些客户用不到的测试数据、测试工具和文件,比较纯净,减少了项目发布后的体积,有利于开发和部署

2.2 生产环境的配置文件

为了满足我们的发布策略,需要新建一个配置文件,命名为webpack.publish.config.js,将webpack.config.js的配置拷贝过去,剔除一些开发配置项即可.
将devSever节点删掉:

  devServer: {hot: true,open: true,port: 4321}

将plugins节点下的热更新插件删掉:

new webpack.HotModuleRupluComuntPlugin()

2. Webpack从0开始使用

2.1 项目初始化

注: 使用的node版本是 12.10.0

2.1.1 新建项目(文件夹)`webpack-senior`

2.1.2 进入`webpack-senior`

新建下面三个:

打包之后的文件夹: dist
项目的源代码: src
webpack的配置文件: webpack.config.js

2.1.3 初始化项目

npm init -y
使用yarn安装 jquery: yarn add jquery (等同于 npm i -D jquery)

2.1.4 src的初始化

在其中新建如下文件和内容:

src/index.js

 <html><body><ul><li>这是第1个li</li><li>这是第2个li</li><li>这是第3个li</li><li>这是第4个li</li></ul></body></html>

src/main.js

import $ from 'jquery'
$(function(){$('li:odd').css('backgroundColor','pink');$('li:even').css('backgroundColor','marron');
})();

2.1.5 配置文件的编写

上面完成了简单的页面和js对页面的操作,下面写Webpack的配置文件(webpack使用配置文件对项目进行打包构建)

webpack.config.js

 const path = require('path');module.exports = {entry: path.join(__dirname, './src/main.js'),output: {path: path.join(__dirname, './dist'),filename: 'bundle.js'}}

以上代码指明了webpack的入口和打包文件,下面需要装2个插件来使index.html和main.js在内存中生成:

yarn add webpack --dev(webpack是在开发环境中进行的,因此需要在npm中使用-S,在yarn中则变为 --dev)
yarn add webpack-dev-server html-webpack-plugin --dev: 安装在内存中生成index.html和main.js的插件,改写webpack.config.js如下:

    const path = require('path');const htmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: path.join(__dirname, './src/main.js'),output: {path: path.join(__dirname, './dist'),filename: 'bundle.js'},plugin: [new htmlWebpackPlugin({template: path.join(__dirname, './src/index.html'),filename: 'index.html'})]}

上面已经将html页面放到了内存中,接下来配置启动命令:package.json

   {"scripts": {"dev": "webpack-dev-server --open --port 3000 hot"}}

2.1.6 小检测点

对上面过程进行说明:

从启动命令npm run dev说起
当在命令行,输入 npm run dev时
工具: webpack-cli(安装在开发环境, yarn add webpack-cli --dev),会以命令行启动的目录作为当前目录,去寻找package.json文件
找到package.json文件后,会寻找"scripts"
找到scripts对象后,进而找到"dev"
然后运行命令webpack-dev-server --open --port 3000 --hot
webpack-dev-server:
1. 每次写完代码手动调用webpack去打包代码太麻烦,因此使用 webpack-dev-server来进行自动打包构建
2. 会根据package.json中output的配置,生产一个内存中的main.js文件.

2.2 webpack中loader的配置

webpack默认只能解析.js和.json文件,若想解析其他类型的文件,需要配置loader

配置loader解析`.scss`

在src目录下新建目录结构/src/css/index.scss
在index.scss中写入如下:

html,
body {margin: 0;padding: 0;ul {list-style: none;padding: 0;margin: 0;}li{font-size:12px;line-height: 30px;padding-left: 10px;}.box {width: 500px;height: 230px;background: url('../images/开心.gif');background-size: cover;}
}

在/src/index.html中添加如下:

<div class="box"></div>

在main.js中导入index.scss:

import './css/index.scss';

此时项目肯定启动不了,因为未配置loader的webpack不能解析.scss,下配置:

解析CSS、SCSS、URL加载
安装依赖: yarn add style-loader css-loader sass-loader node-sass url-loader file-loader --dev

  // webpack.config.jsmodule.exports = {module:{rules:[{ test: /\.css$/, use: ['style-loader', 'css-loader'] },{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },{ test: /\.(png|gif|bump|jpg)$/, use: ['url-loader?limit=5000']}]}}

解析ES6的高级语法
安装依赖: yarn add babel-core babel-loader babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 --dev

    // webpack.config.jsmodule.exports ={module:{rules:[{ test:/\.js$/, use:'babel-loader', exclude: /node_modules/ }]}}````````js//  .babelrc{"presets": ["env", "stage-0"],"plugins": ["transform-runtime"]}

Error: Cannot find module '@babel/core': 查看报错,是因为babel-loader的版本过高,根据提示输入yarn add babel-loader@7 --dev即可
Module not found: Error: Can't resolve 'scss-loader' in 'D:\L-rn\HeiMa\webpack-senior':没有找到scss-loader模块,打开package.json可以看到,里面有一个’sass-loader’,将webpack.config.js中的scss改为sass即可.

3. 使用Webpack打包项目

现在假设项目已经开发完毕,并且打算使用webpack将项目进行打包.

3.1 直接在命令行输入`webpack`命令进行打包

直接打包,生成的项目体积会很大,许多不需要的内容都会被打包在里面

3.2 优化打包

3.2.1 新建一个打包时的webpack配置文件:

webpack.pub.config.js

3.2. 2 新建一个打包指令:

package.json

  {"scripts": {"build": "webpack --config webpack.pub.config.js"}}

3.3.3 统一管理打包后的图片

将打包后的所有图片放到dist/images中统一管理
改变webpack.pub.config.js

  module.exports ={module: {rules:[{ test:/\.(png|gif|bump|jpg)$/, use: ['url-loader?limit=5000&name=images/[hash:8]-[name].[ext]']}]}}

3.3.4 清除之前的打包文件

每次打包都删除之前的dist文件
安装插件 yarn add clean-webpack-plugin --dev
配置: webpack.pub.config.js

    const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {plugins: [new CleanWebpackPlugin()]}

TypeError: cleanWebpackPlugin is not a constructor : 规则配置的时候出错,不需要传入参数下面是官网原话,拿出组件时,用到了结构赋值.

By default, this plugin will remove all files inside webpack`s output.path directory,as well as all unused webpack assets after every successful rebuild

3.3.5 将自己的代码和第三方包分离

webpack.pub.config.js

   const webpack = require('webpack');const WebpackPlugin = new webpack.optimize.CommonsChunkPlugin({name:'common',filename: 'common.js'});module.exports = {entry: {app: path.join(__dirname, './src/main.js'),common: ['jquery']},plugins:[WebpackPlugin]}

自动优先加载第三方模块,在加载自己的代码.

3.3.6 将所有js文件放到js文件夹下面

webpack.pub.config.js

   const WebpackPlugin = new webpack.optimize.CommonsChunkPlugin({name: 'common',-  filename: 'common.js'+  filename: 'js/common.js'});module.exports = {output: {-    filename:'[name].js'+    filename:'js/[name].js'}}

3.3.7 压缩js代码

   // 压缩JS代码const UglifyJsPlugin = new webpack.optimize.UgliJsPlugin({compress:{warnings: false}});// 定义生产环境,进一步压缩代码const DefinePlugin = new webpack.DefinePlugin({'process.env.NODE_ENV': 'production'});module.exports = {plugins:[UglifyJsPlugin,DefinePlugin]}

&nbsp;

3.3.8 压缩HTML代码

webpack.config.js

   const HtmlPlugin = new HtmlWebpackPlugin({template: path.join(__dirname, './src/index.html'),filename: 'index.html',minify:{// 合并多余的空格collapseWhitespace: true,// 移除注释removeComments: true,// 移出属性上的双引号removeAttributeQuotes: true}});

更多minify参数: 官方github

3.3.9 将css代码从js中抽离出来放在同一个文件夹下

官网
yarn add extract-text-webpack-plugin --dev

   const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = {module: {rules:[{test: /\.scss$/,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: ['css-loader', 'sass-loader']})}]},plugins: [new ExtractTextPlugin("style.css")]}

报错Module build failed: CssSyntaxError: 注释掉css的配置文件如下

    module.exports = {module: {rules[//      {//        test: /\.css$/,//        use: ExtractTextPlugin.extract({//          fallback: "style-loader",//          use: "css-loader"//        })//     }...]}}

3.3.10 抽离css时候,图片路径问题

我们希望将CSS从js代码中抽出,单独存放在一个css文件夹下面.
如果css中使用到了url属性(如{background: url(path)}),在抽离出来后路径会发生变化.
需要在抽离后,自动添加路径如下:

````git
{test: /\.scss$/,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: ['css-loader', 'sass-loader'],
+   publicPath: '../'})
}
````

3.3.11 压缩css文件

yarn add optimize-css-assets-webpack-plugin --dev

    const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');plugins: [new OptimizeCssAssetsPlugin()]

TypeError: Cannot read property 'compilation' of undefined: 版本问题: yarn add optimize-css-assets-webpack-plugin@3.2.0 --dev

4.检测点

4.1 webpack是如何提高开发效率的

从文件中打开.html文件时,首先从磁盘上加载该文件的内容到内存中,然后在进行渲染
磁盘和内存的交互,远远没有内存中直接操作快
html-webpack-plugin : 会根据给定的模板文件,生成在内存中的主页
webpack-dev-server : 会根据配置,生成一个在内存中的主入口函数
优点是把能在内存中操作的部分,都放到内存中操作.缺点比较占用内存.
在开发阶段,可以很方便的使用第三方库,在生产阶段,可以使用一些插件将第三方库和源代码进行分离,并压缩代码

4.2 yarn和npm的命令行在使用的时候有什么区别.

首先理解开发环境和生产环境
开发环境: 即开发过程中使用到的依赖,在npm中常常使用-D来将依赖添加到开发环境(“devDependencies”)中
生产环境: 项目部署到服务器上所用到的依赖,在npm中常常使用-S来讲依赖添加到生产环境(“dependencies”)中
在yarn中,使用yarn add默认将包放在生产环境中,即对应npm的 -S
若需要添加到开发环境中,则需要使用yarn add [packagename] --dev

4.3 webpack中loader和plugins的区别

原生的webpack只能理解javascript和json文件,如果遇到如.css或.jsx这类的后缀名,是无法解析的,这个时候就需要用到loader了,而某些loader无法解析的,就用到plugins.
loader是在开发过程用到的插件,而plugin贯彻整个开发和项目部署

webpack --- 发布环境的配置 代码压缩 代码分类

说明