webpack打包原理和相关配置的学习

1. webpack起步

webpack是能把我们的开发文件打包成一个静态模块的工具,它将所有的模块打包成一个函数,并且会自动处理各种js模块之间的依赖关系,使用webpack打包项目,文件中必存在一个打包后的发布文件夹dist,和一个开发文件夹src,如下图;

1. 安装webpack
(1) 全局安装: npm install webpack -g
要指定版本则加上@版本号: npm install webpack@3.6.0 -g
(2) 本地安装: npm install webpack@3.6.0 --save-dev
2. 基本使用
打包指令样式:webpack 入口文件路径 打包成的文件路径名称;
终端命令进入项目文件夹中,输入命令,

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

即把main.js打包成bundle.js,bundle.js文件是所有模块打包之后的文件,放在dist文件夹里,里面处理了将不能被es6识别的方法转化成可识别的语句,也将依赖的模块都加载处理
webpack打包只要打包一个入口文件index.html就行,在index里面只需要引用打包之后的bundle.js;

2. webpack基本配置

1. 在项目目录下新建一个文件webpack.config.js,它是webpack配置哪个入口文件打包成生产环境的文件;建好webpack.config.js之后,直接输入webpack就可以打包,或是npm run serve;
   

2. 配置出口文件时需要获取绝对路径,一般通过动态去获取路径,

获取绝对路径:引入const path = require('path'),   出口文件path: path.resolve(__dirname,'dist'),

此方法需要依赖path包,没有这个包则需要安装node的依赖包,通过npm init 进行初始化,会生成一个package.json,文件目录如下图

package.json文件是项目描述文件,记录了当前项目的一些信息的,devDependencies里面添加webpack需要依赖的包;
devDependencies:开发时依赖包
dependencies:生产环境需要的依赖包
再输入npm install 则会生成package-lock.json文件;

3. 直接输入webpack使用的是全局的打包,但是项目打包必须安装本地webpack,使用指令 npm install webpack@3.6.0 --save-dev
   小tip:webpack版本最好写高版本,不然安装css-loader的时候会出现Module build failed: TypeError: this.getOptions is not a function错误

   这个指令表示webpack是开发时需要的依赖,安装完成之后项目里会多了一个node_modules的包,里面是node的依赖,可以找到webpack包;

4. 用本地webpack时需要在package.json文件里加一个script,里面定义命令build:webpack,当使用npm run build执行的就是webpack打包命令,终端运行webpack时会先找是否有本地webpack的;

3. webpack配置css,html文件----使用loader

1. webpack不能识别打包css,html,图片等文件,这些文件打包则需要用到webpack-loader来进行转化;打开webpack官网的中文文档,右上角导航栏里点击loader,里面有大部分的loader使用方法,具体的需要自己去学习查看,webpack相关loader:https://www.webpackjs.com/loaders/
   

2. loader使用:通过npm安装需要的各种类型文件的loader,不同的文件需要不同的loader;常用的有css-loader,style-loader,less-loader,babel-loader等等;
   安装css-loader指令:npm install --save-dev css-loader

3. 下载loader之后在webpack.config.js关键字module下面配置rule数组下面是各类型loader配置;

  rules: [
          {
            test: /\.css$/i,   //正则表达式,以.css结尾的文件
            use: ["style-loader", "css-loader"],  //使用多个loader时,从右向左的顺序
          },
        ],

4. css-loader要和style-loader一起使用,css-loader只负责加载css,style-loader负责将样式添加到dom中;
5. 使用多个loader时,从右向左的顺序;
6. 安装less-loader的时候需要安装一个less:npm install less less-loader --save-dev
7. 注意,webpack5.0版本对应的loader配置里面要用use字段,不能用loader字段
   否则报错: configuration.module.rules[1].loader should be a non-empty string.
8. 图片文件已经不需要安装url-loader;使用webpack-cli脚手架不需要再进行图片的配置;
9. ES6语句转ES5语法:必须使用babel-loader
   安装方式:

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

(安装失败将npm换成cnpm) 或 官网方式: npm install -D babel-loader @babel/core @babel/preset-env webpack

4. webpack配置vue的安装

1. 安装vue:npm install vue --save
2. 引入vue:import Vue from 'vue'
3. 定义vue实例,可以在index里面写vue代码了
4. 如果报runtime-only的错,则在webpack.config.js里面加个配置

 resolve:{
        //别名
        alias:{
            'Vue$':'vue/dist/vue.ems.js'
        }
    }

    也可以在引入vue的时候import Vue from 'vue/dist/vue.ems.js';(试过报错了,cannot resolve)

5. 安装vue-loader:npm install vue-loader@15.4.2 vue-template-compiler@2.5.21 --save-dev
   或者 npm install vue-loader vue-template-compiler --save-dev
   或者 cnpm install --save-dev vue-loader@15.4.2 vue-template-compiler@2.5.21
6. 配置:

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

5. plugin插件的使用

1. 添加版权的plugin:BannerPlugin,属于webpack自带的插件,在webpack.config里面配置

 const webpack = require('webpack')

    plugins:[
        new webpack.BannerPlugin('最终版权归丁丁所有')
    ]

2. htmlWebpackPlugin:将index.html文件打包到dist文件夹里面去
   自动生成一个index.html文件,将打包的js文件自动通过script标签插入到body中
   安装: npm install html-webpack-plugin --save dev
   修改配置:

 plugins:[
        new htmlWebpackPlugin({
            //按照index.html里面的文件来生成新的dist里面的index.html
            template:'index.html'   
        })
    ]

3. js压缩插件:uglifyjs
   安装:npm install uglifyjs-webpack-plugin@1.1.1 --save dev
   配置:

  const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
  
 plugins: [
   new ugligyJsPlugin()
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
   

在webpack官网中文文档种有关于插件的列表,详细的各个插件使用方法都有说明,需要的可以自行去了解plugin列表

最后,webpack文件也需要优化,把webpack.config.js文件分离,把开发时需要的依赖和上线之后需要的依赖分离开;

以上就是自学webpack做的笔记整理,剩下的就是实际项目使用了.