五、webpack基础

最新推荐文章于 2023-02-23 10:38:58 发布

FWKC

最新推荐文章于 2023-02-23 10:38:58 发布

阅读量114

点赞数

分类专栏： VUE学习笔记文章标签： node.js vue.js javascript

本文链接：https://blog.csdn.net/qq_24790247/article/details/120206627

版权

VUE学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

webpack基础

一、安装

webpack基于node环境
使用npm安装3.6.0，用于手动配置管理学习，后期可以安装新版本

npm install webpack@3.6.0 -g   //全局安装
npm install webpack@3.6.0 --save-dev   //开发时依赖

二、起步

项目中一般包含两个文件：src用来存放源码，dist打包的东西存放位置
打包命令main.js是需要打包的js，bundle.js是打包成的js

webpack main.js bundle.js

测试代码

需运行网页服务器，解决跨域问题才能正常显示

test.js

function add(num1,num2){
    return num1+num2
}

export {add}
export let aaa = "bbbbbbbbbbbb";

main.js

import {add,aaa} from "./test.js"

console.log(aaa);
console.log(add(10, 20));

打包

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

三、配置文件

默认配置文件名为webpack.config.js，配置出入口文件

const path = require('path') //使用node获取当前路径,使用node时要初始化配置，npm init,npm install,执行后会生成package.json文件

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

package.json npm的配置文件,通过该文件使npm命令和webpack命令映射

{
  "name": "testproject",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack" //优先执行本地命令
  },//npm 的执行脚本
  "author": "",
  "license": "ISC"
}

四、CSS配置，使用loader扩展

可使用loader对webpack进行扩展 loader下载配置地址

通过npm安装

npm install --save-dev style-loader
npm install --save-dev css-loader
npm install less less-loader --save-dev less
npm install --save-dev url-loader
npm install --save-dev file-loader
npm install --save vue

//Module build failed: TypeError: this.getOptions is not a function报错时，可尝试安装低版本
npm install css-loader@2.0.2 --save-dev
npm install style-loader@0.23.1  --save-dev
npm install less less-loader@5.0.0 --save-dev less
npm install --save-dev url-loader@2.0.0
npm install --save-dev file-loader@2.0.0
npm install --save vue@2.5.21

在webpack.config.js中modules关键字下进行配置

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

require(’./css/normal.css’)

五、less

module.exports = {  module: {    rules: [      {        test: /\.less$/i,        loader: [          // compiles Less to CSS          'style-loader',          'css-loader',          'less-loader',        ],      },    ],  },};

六、image

配置文件

{            test: /\.(png|jpg|gif)$/,            use: [              {                loader: 'url-loader',                options: {                  limit: 8192,                  name:" img/[name].[hash:8].[ext]"                }              }            ]          },

配置文件中options对象有一个属性limit，表示图片大小低于该大小的的图片，将以base64编码的方式显示。
超过该大小的图片还需安装file-loader，才能显示，并且在output中配置publicPath，配置图片转换位置
大于limit规定的图片，转换后的图片命名方式按name属性命名

完整配置文件如下：

const path = require('path')module.exports={    entry: './src/main.js',    output: {        path: path.resolve(__dirname, 'dist'),        filename: "bundle.js",        publicPath:"dist/"    },    module: {        rules: [          {            test: /\.css$/i,            use: ["style-loader", "css-loader"],          },          {            test: /\.less$/i,            loader: [              // compiles Less to CSS              'style-loader',              'css-loader',              'less-loader',            ],          },          {            test: /\.(png|jpg|gif)$/,            use: [              {                loader: 'url-loader',                options: {                  limit: 8192,                  name:" img/[name].[hash:8].[ext]"                }              }            ]          },        ],      },}

七、Vue配置

安装时不需要加-dev

npm install vue --save

导入vue

import Vue from 'vue'

使用Vue
直接使用会报错，runtime-only错误，改版本不能使用任何版本的template，runtime-compiler代码才可以编译template，解决:在webpack配置文件中增加下边代码指定使用的版本：

module.exports={    entry:,    output:{},    module:{},    resolve: {      alias:{        'vue$': 'vue/dist/vue.esm.js'      }    }}

八、el和template的区别

当vue对象中既有el，又有template时，在vue运行时，会将el绑定的前端对象内容替换为template的内容

九、Vue loader

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

webpack.config.js配置

{    test: /\.vue$/,    use: ['vue-loader']}

缺少插件报错，安装vue-loader 13.0.0版本

如果想省略导入后缀名，可在webpack配置文件中的resolve对象中定义extensions对象：[’.js’,’.css’,’.vue’]

十、plugin插件

BannerPlugin，横幅插件，添加版权信息

为打包的文件添加版本号、开源声明等信息,webpack.config.js配置信息

const webpack = require('webpack')module.exports = {	...	plugins: [		new webpack.BannerPlugin('最终版权归所有')	]}

html-webpack-plugin 处理index.html文件，自动生成index.html

安装：

npm install html-webpack-plugin@3.2.0 --save-dev

配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {	...	plugins: [		new webpack.BannerPlugin('最终版权归所有'),		new HtmlWebpackPlugin()	]}

1.应为配置了该插件，之前加的publicPath属性应去掉

2.生成的index.html模板内容缺失，需在配置插件是，为插件配置模板

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {	...	plugins: [		new webpack.BannerPlugin('最终版权归所有'),		new HtmlWebpackPlugin({			template: 'index.html'		})	]}

uglifyjs-webpack-plugin，js压缩插件

安装：

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

配置：

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')module.exports = {	...	plugins: [		new webpack.BannerPlugin('最终版权归所有'),		new HtmlWebpackPlugin({			template: 'index.html'		}),		new UglifyjsWebpackPlugin()	]}

webpack-dev-server，搭建本地服务器，实时更新预览，服务于摸一个文件夹，监控代码改变，实时在内存编译，执行npm run build时才会编译

安装：

npm install --save-dev webpack-dev-server@2.9.3

配置：

const WebpackDevServer = require('webpack-dev-server')module.exports = {	...	plugins: [		new webpack.BannerPlugin('最终版权归所有'),		new HtmlWebpackPlugin({			template: 'index.html'		}),		new UglifyjsWebpackPlugin(),	]，    devServer: {      contentBase: './dist',      inline: true,    }}

运行：

在npm package.json中配置别名

{    "dev": "webpack-dev-server --open"}

–open会自动打开浏览器

十一、webpack配置分离

把开发时配置和发布时配置进行分离，开发和发布使用不同的配置文件

依赖于webpack-merge插件

安装：

npm install webpack-merge --save-dev

例子:

在build文件夹新建了一个名为base.config.js、prod.config.js、dev.config.js的配置文件。
- base.config.js配置基础配置
- prod.config.js配置发布配置
- dev.config.js配置开发配置
分别在prod.config.js中导入base.config.js，并把自身配置和base.conig.js配置进行合并

const webpackMerge = require('webpack-merge')
const baseconfig = require('./base.config.js')

module.exports = webpackMerge(baseConfig,{
    devServer: {
        contentBase: './dist',
        inlien: true
    }
})

在package.json中的脚本中为执行指定配置文件

"scripts": {
    path: path.resolve(__dirname, '../dist')
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
}