webpack笔记

一、webpack的安装

1、原始打包命令

webpack ./src/main.js  ./dist/bundle.js

2、使用 Terminal 命令行进行 创建 package.json

E:\HbuilderXProjects\vue-study\LearnVuejs04-V2\01-webpack的起步>npm init

package name: (01-webpack的起步) meetwebpack

3、只用一个敲一个webpack进行项目的构建

/* 配置入口出口：在命令端只用在对应需要打包的项目下面进行输入webpack回车 */
const path = require('path');

/* 
	path是一个全局的模块,他自己里面定义的一个
	__dirname ： 双下划线‘_’
	
 */

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

4、使用npm run build

	{
		"build": "webpack"
	}
	就是相当于把上面手动的 webpack命令放入了 packjson.josn 里面了
注意：
	一、npm run build 就相当于是一个映射 通过
		build找到 webpack 然后找到 webpack的配置
	二、这个命令会先找到本地的 webpack
	三、一般都需要先安装一个本地的 webpack
	
		-- 命令
			cd 对应目录
			terminal: npm install webpack@3.6.0 --save-dev
		
		--自动生成
			node_modules 文件夹
			packjson.json 增加
				"devDependencies": {
					"webpack": "^3.6.0"
				}
	四、Terminal里面用命令 webpack 是全局的
			如果需要使用本地的 webpack 就需要对应的目录
			node_modules/.bin/webpack

二、webpack的loader

1. css——loder

由于不能直接进行CSS的样式加载，所以需要手动进行webpack中的css-loder加载

首先，你需要先安装 css-loader：

npm install --save-dev css-loader

然后把 loader 引用到你 webpack 的配置中。如下所示：

file.js

import css from "file.css";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

2. less——loder

首先，你需要先安装 less 和 less-loader：

$ npm install less less-loader --save-dev

然后将该 loader 添加到 webpack 的配置中去，例如：

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        loader: "less-loader", // 将 Less 文件编译为 CSS 文件
      },
    ],
  },
};

接着使用你习惯的方式运行 webpack。

主文件 main.js 引入 sprcial.less

【Vue】一一一一Webpack笔记_html

【Vue】一一一一Webpack笔记_html_02

版本控制

【Vue】一一一一Webpack笔记_webpack_03

运行命令

E:\HbuilderXProjects\vue-study\LearnVuejs04-V2\02-webpack的loader>npm run build

3. 图片资源处理器 url-loader

①、运行

【Vue】一一一一Webpack笔记_webpack_04

首先，你需要安装 url-loader：

npm install url-loader --save-dev

url-loader 功能类似于 file-loader, 但是在文件大小（单位为字节）低于指定的限制时，可以返回一个 DataURL。

main.js

import img from './image.png';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

然后通过你的首选方法运行 webpack。

注意:

如果运行 npm run build 报错(问题就是你的)

webpack.config.js文件里面的图片大小小于你 本来图片的大小,只需要增加一下limit的值就好了

【Vue】一一一一Webpack笔记_js_05

【Vue】一一一一Webpack笔记_css_06

运行一下

【Vue】一一一一Webpack笔记_css_07

如果不想增加limit 可以直接 npm install --save-dev file-loader

但是此时图片可能显示不出来但是dist文件夹中会出现你的目标照片(名字重新生成的)

【Vue】一一一一Webpack笔记_vue_08

但是页面引的路径不是你这个图片的路径

解决:

​ 修改webpack.config.js 在 output增加 publicPath:'dist/'[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7CI4dHgL-1613889554501)(D:/Typora/upload/image-20210218124203411.png)]

②、注意

1.修改文件名称

由于webpack自动生成的名字特别长（是一个32位hash值），但是真实的环境中对图片的名字有一定的要求

所以在options中添加上如下选项

​ 解决：

​

​ 固定写法：在name:'img/[name].[hash:8].[ext]'

【Vue】一一一一Webpack笔记_vue_09

实现效果：

【Vue】一一一一Webpack笔记_webpack_10

三、bable的使用

将 ES6 转换为 ES5

  • 命令：
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

  • 配置：

    【Vue】一一一一Webpack笔记_vue_11

  • 结果：

    build.js里面的所有 const 都转换成为了 var

四、webpack里面配置Vue

♉️：具体步骤

  1. 安装Vue

-dev是运行环境需要，但是我们后续运行环境也需要，所以不加-dev

npm install vue --save

  1. main.js中进行导入vue

    【Vue】一一一一Webpack笔记_vue_12

  2. 配置index.html

    【Vue】一一一一Webpack笔记_webpack_13

    ​

⭕️：打包信息错误

  1. 报错（运行两个版本 runtim-only和 runtime-compile）

runtim-only:代码中不能有任何template

runtime-compile:代码中可以有template,因为compiler可以进行编译template

【Vue】一一一一Webpack笔记_vue_14

  1. 解决

使用取别名的方式给它指定用什么版本进行运行和编译

在webpack.config.js中进行配置

【Vue】一一一一Webpack笔记_webpack_15

五、创建Vue时el和template的关系

✈️：关系

如果同时有 el 和 template 那么 template 会覆盖掉 el 中的数据

♉️：具体步骤

  1. main.js

    【Vue】一一一一Webpack笔记_css_16

  2. index.js

    【Vue】一一一一Webpack笔记_vue_17

⭕️：结果

【Vue】一一一一Webpack笔记_html_18

六、Vue的终极使用方案

1.安装vue-loader 和 vue-template-compiler

npm install vue-loader vue-template-compiler --save-dev

2.修改webpack.config.js配置文件

【Vue】一一一一Webpack笔记_html_19

3.修改版本

【Vue】一一一一Webpack笔记_vue_20

npm install

4.步骤

抽取 template 中的代码 创建一个 App.vue 文件

【Vue】一一一一Webpack笔记_webpack_21

主文件进行引用

【Vue】一一一一Webpack笔记_vue_22

七、webpack插件Plugin

1.BannerPlugin横幅插件

【Vue】一一一一Webpack笔记_js_23

运行 npm run build 之后就在 bundle.js里面出现版权了

【Vue】一一一一Webpack笔记_vue_24

2.HtmlWebpackPlugin

意义：

  • 在项目发布时，发布的是dist中的文件内容，但是dist文件夹中没有Index.html，那么打包的js就是没有了意义
  • 所以，我们需要将Index.html文件打包到dist文件夹中，所以这时候就需要HtmlWebpackPlugin插件

HtmlWebpackPlugin插件做的事：

  • 自动生成一个index.html文件（可以指定模板来生成）
  • 将打包的js文件，自动通过script标签插入到body中

安装插件

  • npm install html-webpack-plugin --save-dev

使用插件,修改webpack.config.js文件中的plugins部分的内容

  • 这里的template表示更具什么模板来生成Index.html
  • 另外，我们需要删除之前在output中添加的publicPath属性
  • 否则，插入的script标签中的src可能会有问题【Vue】一一一一Webpack笔记_webpack_25
  • 详细步骤【Vue】一一一一Webpack笔记_html_26
  • 模板【Vue】一一一一Webpack笔记_css_27

3.UglifyjsWebpackPlugin(简化Js)

【Vue】一一一一Webpack笔记_vue_28

八、搭建本地服务器（不需要修改就发布）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8TNueBSj-1613889554527)(D:/Typora/upload/image-20210220121949755.png)]

注意：

​ 必须如果没有设置端口号，则直接访问http://localhost:8080/可以看到页面信息实时更新

最后：

​ 如果修改好了，就可以使用npm run build

九、webpack配置文件分离

将运行和生产环境进行了分离

需要装一个 webpack-merge 合并插件

npm install webpack-merge --save-dev

0.普通webpack.config.js

/* 配置入口出口：在命令端只用在对应需要打包的项目下面进行输入webpack回车 */
const path = require('path');

// webpack自带的直接引入用就好了
const webpack = require('webpack');
// 导入 HtmlWebpackPlugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
/* 
	path是一个全局的模块,他自己里面定义的一个
	__dirname ： 双下划线‘_’
	
 */

module.exports = {
	entry: './src/main.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js',
		/* publicPath: 'dist/' */
	},
	module: {
		rules: [{
				test: /\.css$/i,
				// css-loader 只负责加载不负责解析
				use: ["style-loader", "css-loader"],
			},
			{
				test: /\.less$/i,
				use: [{
						loader: "style-loader", // 将 Less 文件编译为 CSS 文件
					},
					{
						loader: "css-loader",
					},
					{
						loader: "less-loader",
					}
				]
			},
			{
				test: /\.(png|jpg|gif)$/i,
				use: [{
					loader: 'url-loader',
					options: {
						limit: 9999,
						name: 'img/[name].[hash:8].[ext]'
					},
				}, ],
			},
			{
				test: /\.m?js$/,
				exclude: /(node_modules|bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['es2015']
					}
				}
			},
			{
				test: /\.vue$/,
				use: ['vue-loader']
			}
		],
	},
	resolve: {
		alias: {
			// 指定运行的版本
			'vue$': 'vue/dist/vue.esm.js'
		}
	},
	plugins: [
		new webpack.BannerPlugin('最终版权归XiaoCoder所有'),
		new HtmlWebpackPlugin({
			template:'index.html'
		}),
		new UglifyjsWebpackPlugin()
	],
	devServer:{
		// 服务当前的文件夹
		contentBase:'./dist',
		// 实时监听
		inline: true,
		// port 默认 8080
	}

}

⏬ 下面步骤就是进行分离

1.base.config.js

生产 和 开发环境都需要的代码（公共东西）

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'bundle.js',
        /* publicPath: 'dist/' */
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                // css-loader 只负责加载不负责解析
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.less$/i,
                use: [{
                    loader: "style-loader", // 将 Less 文件编译为 CSS 文件
                },
                    {
                        loader: "css-loader",
                    },
                    {
                        loader: "less-loader",
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 9999,
                        name: 'img/[name].[hash:8].[ext]'
                    },
                },],
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ],
    },
    resolve: {
        alias: {
            // 指定运行的版本
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new webpack.BannerPlugin('最终版权归XiaoCoder所有'),
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
    ],


}

2.dev.config.js

开发时依赖

/*开发环境*/
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');

module.exports = webpackMerge.merge(baseConfig, {
    devServer: {
        // 服务当前的文件夹
        contentBase: './dist',
        // 实时监听
        inline: true,
        // port 默认 8080
    }
})

3.pro.config.js

生产环境

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');

module.exports = webpackMerge.merge(baseConfig, {
    plugins: [
        new UglifyjsWebpackPlugin()
    ]
})