webpack的使用

Posted 2021-03-09 爱代码三千

webpack的使用

webpack中的代码都是以模块化来进行编写

和gulp的区别：

• gulp实现自动化压缩js，css，less代码等，
• webpack是把项目的js，css，less等文件打包成一个或多个，主要用于模块化方案

全局安装

npm install webpack@3.6.0 -g

局部安装

npm install webpack@3.6.0 --save-dev

--save-dev是开发时依赖，项目打包后不需要继续使用的。

使用方法

运行如下命令，让webpack自动帮你打包main.js，它会自动帮你处理好各种依赖

//3.6.0用法
webpack ./src/main.js ./dist/bundle.js
//4.0用法
webpack ./src/main.js -o ./dist/bundle.js

手动配置package

npm init

package全局与本地命令

• 当直接在终端运行命令时在全局环境中查找，
• 如果给package中script设置命令，则优先在本地查找

配置webpack.config.js

    const path = require('path')

    module.exports = {
      entry : './src/main.js',
      output : {
        //resolve拼接当前目录，绝对路径
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
      }
    }

注意：

• 直接在终端运行webpack是在全局环境中运行，
• 要使用本地可以在package中配置script，然后npm run build即可
• 运行package中script的时候，会现在局部环境中寻找，找不到再去全局

loader

在开发中，我们不仅要处理js文件，还要将cs，typescript，图片，es6等转换成浏览器能够处理的文件
，只有webpack是做不到那么多的，所以需要安装扩展loader

使用方法：

• 通过npm安装需要使用的loader
• 在webpack.config.js中的module关键字下进行配置

css-loader使用注意

• 使用css-loader时，只是将css文件加载，还需要再安装style-loader进行渲染dom树
• module中的use规则，读取顺序是从右向左，所以应该先写style-loader，再写css-loader

url-loader的使用

• 当css引入图片时，需要添加并配置url-loader。
• 图片文件字节小于limit时，会对图片进行base64编码，css中url通过base64编码显示
• 如果图片大于limit时，则会提示安装file-loader。（limit默认=8kb）

file-loader的使用

url-loader和file-loader的配置文件只能使用一个

开发时如果图片和html不在同一个文件夹，可以在webpack.config.js里output中设置publicPath:‘dist/‘ 。
就会默认引用该路径中的文件

和url-loader的区别：

• 打包时file-loader会把图片进行哈希值命名并一起打包进dist文件夹中
• url-loader只是作为base64字符串来使用，不需要存储单独文件

开发中打包图片我们想要使用原来的名字，可以在options中自定义文件的名字

options: {
  //img文件夹中，原来文件名+8位哈希值+原格式extension的缩写
  name:'img/[name].[hash:8].[ext]'
}

babel => es6语法处理

webpack打包的js文件中还存在es6语法，由于部分浏览器不支持es6，所以我们需要帮它转换成es5

安装方法：

 npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
 

配置直接去官网找，把presets改成es2015即可

配置vue

vue运行时也需要依赖，所以安装时不用添加-dev

npm install vue --save

注意：

1. vue模块导出时使用的export default方法，所以导入不用加大括号{}。

    import Vue from 'vue'

2. vue.runtime-only版本不可以有template。但vue实例默认就是template，所以打包时报错。
   应该切换包含compiler的版本

    //在webpack.config中配置，和module同级
    resolve:{
      //alias:别名。切换vue版本
      alias:{
        //esm:esmodule
        'vue$':'vue/dist/vue.esm.js'
      }
    }

3. 引用组件时必须写扩展名，我们也可以设置，使不写扩展名也可引用

    //在webpack.config中配置，和module同级
    resolve:{
      //alias:别名。切换vue版本
      alias:{
        //esm:esmodule
        'vue$':'vue/dist/vue.esm.js'
      },
      //extensions:扩展名
      extensions:['.js','.css','vue']
    }

   我们引用vue时直接写import app from ‘App‘即可
   
   

vue文件封装处理

1. 安装vue-loader和template-compiler

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

2. 配置文件

   Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，
   请确保在你的 webpack 配置中添加 Vue Loader 的插件：
   配置vue-loader官网

    //引用插件，将下行代码添加至webpack.config头部
    const { VueLoaderPlugin } = require('vue-loader');
    //配置vue-loader
    module.exports = {
      module: {
        rules: [
          {
            test: /.vue$/,
            loader: 'vue-loader'
          }
        ]
      },
      plugins: [
        // new一个插件，并记得引用！
        new VueLoaderPlugin()
      ]
    }

plugin插件

webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。

使用方法：

1. 通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)

2. 在webpack.config.js中的plugins中配置插件。

    //如版权配置。和module同级
    plugins:[new webpack.BannerPlugin('这里是Vicer的版权')]
    //别忘记在头部引入
    const webpack = require('webpack')

打包html的plugin

默认html文件在根目录中，而我们需要将index.html文件打包到dist文件夹中发布

所以需要使用HtmlWebpackPlugin插件

1. 自动生成一个index.html文件(可以指定模板来生成)

2. 将打包的js文件，自动通过script标签插入到body中

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

配置文件：

plugins: [
  new htmlWebpackPlugin({template:'index.html'})
]

js压缩的Plugin

对打包的js文件进行压缩
这里我们使用1.1.1版本，与cl2保持一致

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

配置文件：

const uglifyJsPlugin = require('uglifyjs-webpack-plugin');

plugins: [
  new uglifyJsPlugin()
]

搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，
可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

简而言之就是热更新
这里我们使用2.9.0版本，与webpack3.6.0相对应

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

配置选项：

• contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
• port：端口号 //默认8080
• inline：页面实时刷新

• historyApiFallback：在SPA页面中，依赖HTML5的history模式

  //和module同级
  devServer:{
    contentBase:'./dist',
    inline:true
  }

  注意：
  

1. 这里不需要引用。
   
2. 通过本地环境命令来调用，也就是在package中设置script

3. 命令中可以添加 --open，在自动更新时打开页面

     "dev": "webpack-dev-server --open"

配置分离

在开发过程中，有的配置开发时用，有的配置生成时用，为了对应不同的时期我们可以做一个配置分离

1. 在文件夹中把配置分离成三个文件，一个基础base，一个开发dev，一个生产prod。

2. 安装webpack合并工具

    npm install webpack-merge --save-dev
    //无需配置webpack.config文件,使用时导入即可

3. 导入webpack-merge和基础config文件，其他插件按需导入，然后进行合并

    //这里以生产prod.config.js为例
    const uglifyJsPlugin = require('uglifyjs-webpack-plugin');
    //必备导入
    const webpackMerge = require('webpack-merge');
    const baseConfig = require('./base.config.js');
    //合并配置并导出
    module.exports = webpackMerge(baseConfig,{
      plugins: [
        //插件按需导入
        new uglifyJsPlugin()
      ]
    });

1. 修改pageage文件

   • pageage文件中使用npm打包默认调用当前文件夹中webpack.config。

   • 但我们要使用配置分离中的文件，所以script要手动引用相应的config文件

     "scripts": {
       "test": "echo "Error: no test specified" && exit 1",
       "build": "webpack --config ./build/prod.config.js",
       "dev": "webpack-dev-server --open --config ./build/dev.config.js"
     }

2. 修改基础配置文件

   打包中发现直接打包到了配置文件夹，但我们希望其打包到父级目录
   output : {
   //resolve拼接当前目录，在父级文件夹打包
   path:path.resolve(__dirname,‘../dist‘),
   filename:‘bundle.js‘
   }

3. 总结

   使用npm run build 生产时打包文件
   使用npm run dev 开发时打包文件