webpack了解笔记

了解知识:
      一般项目中存在两个必要文件夹 src文件夹和dist文件夹,src文件夹用于存放开发的代码,dist文件夹用于存放我们打包好后的文件
1.什么是webpack？
      webpack是一个前端模块化打包工具,能够帮助我们处理模块间的各种复杂关系,它在打包的过程中可以对资源进行处理,比如压缩图片,将scss转换为css,将es6语法转化为es5语法,将typescript转化为javascript等.

2.webpack和grunt/gulp有什么不同
      grunt/gulp更加强调的是前端流程的自动化,模块化不是它的核心
      webpack更加强调模块化开发管理,而文件压缩合并,预处理等功能只是它附带的功能

webpack起步
3.安装webpack
  全局安装webpack
      安装webpack需要安装node环境,然后通过npm install -g webpack 命令安装webpack
  局部安装webpack
      进入需要安装的目录下面,运行命令
          npm install webpack  --save-dev

4.为什么全局安装webpack后,还需要局部安装webpack(在文件根目录中安装)
      因为在终端直接执行webpack命令,使用的是全局安装的webpack;当在package.json文件中定义了scripts脚本时,其中包含了webpack命令,而这里使用的就是局部webpack

5.普通的webpack进行打包命令(不推荐使用)
      在终端中运行命令
          webpack 需要打包的文件路径 打包后存放文件的路径

6.通过webpack进行vue,js,css,less,图片,将es6语法转为es5语法等相关功能的打包配置(推荐使用)
      (1)根目录,先在终端通过 npm init -y 命令初始化一个package.json文件,并且安装局部webpack
      (2)根目录,新建一个 webpack.config.js文件,安装相关需要使用的依赖
            npm install style-loader --save-dev
            npm install --save-dev css-loader
            npm install --save-dev less-loader less
            npm install --save-dev url-loader
            npm install --save-dev file-loader
            npm install babel-loader babel-core babel-preset-env
            npm install vue --save
            npm install vue-loader vue-template-compiler --save-dev
      (3)在该webpack.config.js文件中进行信息配置
                  //导入相关模块
                  const path = require('path');

                  //进行配置webpack打包js相关配置
                  module.exports = {
                    entry: './src/js/main.js',
                    output: {
                      path: path.resolve(__dirname, 'dist'),
                      filename: 'moudle.js',
                      publicPath: 'dist/'
                    },

                    //进行配置webpack打包css样式的信息
                    module: {
                      rules: [{
                          test: /\.css$/,
                          use: ['style-loader', 'css-loader']
                        },
                        //进行配置webpack打包less样式的信息
                        {
                          test: /\.less$/,
                          use: [{
                            loader: "style-loader" // creates style nodes from JS strings
                          }, {
                            loader: "css-loader" // translates CSS into CommonJS
                          }, {
                            loader: "less-loader" // compiles Less to CSS
                          }]
                        },
                        //进行配置webpack打包图片样式的信息
                        {
                          test: /\.(png|jpg|gif)$/,
                          use: [{
                            loader: 'url-loader',
                            options: {
                              //当加载的图片小于limit时,会自动将图片编译为base64字符串的形式
                              limit: 8192,
                              name: 'img/[name].[hash:8].[ext]'
                            }
                          }]
                        },
                        //配置将es6转为es5
                         {
                          test: /\.js$/,
                          exclude: /(node_modules|bower_components)/,
                          use: {
                            loader: 'babel-loader',
                            options: {
                              presets: ['@babel/preset-env']
                            }
                          }
                        },
                        {
                          test:/\.vue$/,
                          use:['vue-loader']
                        }
                      ]
                    },
                    //配置Vue相关
                    resolve:{
                      alias:{
                        'vue$':'vue/dist/vue.esm.js'
                      }
                    }
                  }
      (4)打开package.json文件,在script脚本属性中添加新的命令
          "build":"webpack"
      (4)在终端中输入npm run build 就可以进行打包了

7. 在Vue实例对象中,如果同时存在el属性和template属性,那么在渲染页面时,会将template属性中的html模板内容覆盖掉el属性控制的实例区域.   

8.webpack核心插件plugin
      loader主要用于转换某些类型的模块,它是一个转换器.而plugin是插件,它是对webpack本身的扩展,是一个扩展器.
      使用过程:
            1.通过npm安装相应的plugin插件
            2.在webpack.config.js文件中的plugins属性中配置插件
                (1)版权声明插件 在webpack.config.js文件中,引入webpack模块,然后配置module.exports={
                  ...
                  plugins:[
                    new webpack.BannerPlugin('最终版权归xxx所有');//webpack自带,不需要安装
                  ]
                }
                (2)打包html文件的plugin插件
                   安装: npm install html-webpack-plugin --save-dev
                   配置：
                    plugins:[
                      new webpack.BannerPlugin('最终版权归xxx所有'),//webpack自带,不需要安装
                      new htmlWebpackPlugin({
                        template:'index.html'
                      }),
                    ]
                    删除output配置中的publicPath属性.
                (3)压缩打包后的js文件插件
                    安装: npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
                    配置webpack.config.js：
                        导入核心模块
                        const uglifyJsPlugin=require('uglifyjs-webpack-plugin')
                          plugins:[
                      new webpack.BannerPlugin('最终版权归xxx所有'),//webpack自带,不需要安装
                      new htmlWebpackPlugin({
                        template:'index.html'
                      }),
                      new uglifyJsPlugin()
                    ]

9.webpack搭建本地服务器
    安装:npm install --save-dev webpack-dev-server@2.9.1 
    配置webpack.config.js文件属性devserver
        devServer:{
          contentBase:'./dist',
          inline:true
        }
    配置package.json文件的scripts脚本属性
        "dev":"webpack-dev-server  --open"
    运行服务器命令
          npm run dev