webpack学习笔记（一）

参考文章： https://www.jianshu.com/p/91a4214b913b

https://segmentfault.com/a/1190000014251654?utm_source=tag-newest

https://www.jianshu.com/p/cb0db034cb17

https://blog.csdn.net/w178191520/article/details/85932849

https://blog.csdn.net/qq_39343308/article/details/86159668

彻底解决 webpack 打包文件体积过大

webpack4提升180%编译速度

1.卸载全局的 webpack

npm uninstall webpack webpack-cli -g

　其中安装webpack-cli 是可以让webpack在命令行执行的。在webpack 4.0  中需要安装。

2 局部安装webpack

npm install webpack webpack-cli -D

3. 具体安装某个版本：

npm install webpack@4.16.5 webpack-cli -D

附，webpack安装版本：

{
  "name": "lesson",
  "sideEffects": false,
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.0",
    "@babel/preset-react": "^7.0.0",
    "autoprefixer": "^9.3.1",
    "babel-loader": "^8.0.4",
    "clean-webpack-plugin": "^1.0.0",
    "css-loader": "^1.0.1",
    "express": "^4.16.4",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.10.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-middleware": "^3.4.0",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@babel/runtime": "^7.2.0",
    "@babel/runtime-corejs2": "^7.2.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "webpack": "^4.25.1" 
  }
}

=================================

首先新建最基本的构造：

执行 npm init 生成的配置文件 

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "webpack"
  },
  "author": "zhenyulei",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.3.1",
  }
}

webpack.config.js文件：

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

module.exports = {
    entry: {
        main:'./src/index.js'
    },
    output:{
        filename:'[name].js',
        path:path.resolve(__dirname,'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}

=========================================

 4. 样式css配置

先安装  'style-loader','css-loader','sass-loader,'node-sass'

module:{
    rules:[{
       test:/.css$/ ,
       use:['style-loader','css-loader','sass-loader'] 
    }]
}    

sass-lode处理scss文件，   css-loader 处理css文件之间 import的引用；style-loader 会把css-loader转换成的css挂在到html生成的header部分；使用sass-loader 还要安装 node-loader

5. 自动添加css前缀   npm i postcss-loader autoprefixer -D  注意的是 这只是针对直接引用的css样式，而不能给 css中 在 @import进来的css，原因见6；

module:{
    rules:[{
       test:/.scss$/ ,
       use:[   'style-loader',
               'css-loader',
               'postcss-loader',
               'sass-loader'      
    ] 
    }]
} 

然后在postcss.config.js 中定义autoprefixer插件

module.exports = {
    plugins:[
        require('autoprefixer')({
            "browsers": [
                "defaults",
                "not ie < 11",
                "last 2 versions",
                "> 1%",
                "iOS 7",
                "last 3 iOS versions"
            ]
        })
    ]
}

如果打包编译报警告：

则将postcss文件中  browsers  改为："overrideBrowserslist"

6 如果scss中引入其他的scss，如   @import './index.scss' 

这种情况下，如果不做设置，index.scss就会从css-loader开始执行，所以要在下面设置 css-loader的参数：每次要执行几个路径：

module:{
    rules:[{
       test:/.css$/ ,
       use:[  
               'style-loader',
                {
                loader:'css-loader', //css-loader如果要增加下面的配置项，则写成对象形式。
                options:{
                    importLoaders:2,  //表示在css中 使用import引入的css文件，也要执行下面两个loader
                    modules:true    //css模块化打包，也就是哪个页面引入了该css，则对哪个页面有效，避免影响其他的文件（后续发现，设置了该值样式不在生效）

                 }
               },  
               'postcss-loader',  //这里注意postcss和sass的loader顺序
               'sass-loader'  //先用sass编译成css，再用postcss
      ] 
    }]
}     

7 加载图片loader

module:{
   rules:[{     //有多个规则，所以需要使用数组
      test:/.(jpg|png|gif)$/,  //匹配后缀文件
      use:{
         loader:'file-loader', //使用file-loader编译文件
         options:{    
             name:'[name]_[hash].[ext]', //输出名字其中[ext]是后缀名称
             outputPath:'images/',   //图片的输出路径,指的是输出文件夹的 比如dist文件夹

         }  
      }    
    }]  
}

8. 使用url-loader  可以把小图片转成base64，然后放在打包的js文件中。他的功能比file-loader 功能更全！ file-loader则是打包成单独的文件

module:{
   rules:[{     //有多个规则，所以需要使用数组
      test:/.(jpg|png|gif)$/,  //匹配后缀文件
      use:{
         loader:'url-loader', //使用url-loader编译文件
         options:{    
             name:'[name]_[hash].[ext]', //输出名字其中[ext]是后缀名称
             outputPath:'images/',   //图片的输出路径
             limt:2048, //大小限制，比2048小的图片转成base64，大的图放在outputPath路径下

         }  
      }    
    }]  
}

 

9  根据阿里巴巴字体库( https://www.iconfont.cn/ )下载icon字体(先添加购物车，再下载代码)，保存后缀为.eot，.svg，.ttf ， .woff的文件，放在项目的font文件夹下；

复制下载的 iconfont.css文件中所有代码,并修改src'的路径

@font-face {font-family: "iconfont";
  src: url('./iconfont.eot?t=1554433240017'); /* IE9 */
  src: url('./iconfont.eot?t=1554433240017#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('./iconfont.woff?t=1554433240017') format('woff'),
  url('./iconfont.ttf?t=1554433240017') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./iconfont.svg?t=1554433240017#iconfont') format('svg'); /* iOS 4.1- */
}

放入自己的font.css文件中

使用方法，在html中 增加必须的类名： 

import './font.css' //引入字体文件的css
<div class="iconfont .icon-zhaoxiangji">abc</div>

由于webpack无法识别引入的字体文件后缀，所以要在配置文件中使用file-loader进行对字体的编译，目的是把这些文件从font文件夹下放在dist文件夹下：

{
    test:/.(eot|ttf|svg)$/,
    use:{
      loader:'file-loader'
    }
}

 并且去掉css的模块化

10 使用插件：使用 npm install html-webpack-plugin -D 

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new HtmlWebpackPlugin({
        template: 'src/index.html'  
        //使用该插件，可以在打包结束后，根据配置的模板，
        //生成html文件，并且把配置的output中的js文件引入html
    })
],

clean-webpack-plugin 清除dist文件夹的内容，详见：

webpack 4.0 中 clean-webpack-plugin 的使用

const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除dist文件夹的内容
plugins: [
    new HtmlWebpackPlugin({
        template: 'src/index.html' // 在打包之后运行
    }), 
    new CleanWebpackPlugin(),// 在打包之前运行
],

PS: 需要修改文件，执行 npm run build之后才会生成新的打包js文件

2:  如果打包 报这个错误  CleanWebpackPlugin is not a constructor---记得改成：

const {CleanWebpackPlugin} = require('clean-webpack-plugin'); 

11 

module.exports = {
    entry: {
        main: './src/index.js', //多个入口文件
        sub: './src/sub.js',
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist') //自动生成多个出口js文件
    }
}

如果想让生成的html文件，引入的js文件前面自动加前缀路径：

output: {
    publicPath:'http://cdn.com.cn'    //文件路径前缀
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist') //自动生成多个出口js文件
}

12  sourceMap

现在已经知道 dist目录下的 main.js 文件96行出错了，
sourceMap 它是一个映射关系，知道dist目录下 main.js 文件 96 行
实际上对应的是 src 目录下 index.js 文件中的第一行

 devtool:'source-map'   这样设置，会在生成的文件中生成对应的map文件，记录对应关系

 devtool:'inline-source-map'  会被打包到 生成的js文件中。

 devtool:'cheap-inline-source-map'  //cheap 只映射到哪一行 而不需要定位到那一列,并且只会映射编写的index.js 和 生成的bundle.js文件。不会管loader等其他的映射

 devtool:'cheap-module-source-map'   //module 还要管一些loader下的文件

实际用的过程中建议用： 

devtool:'cheap-module-eval-source-map'  //本地开发 eval打包快 但是提示不全面
devtool:'cheap-module-source-map'  //线上提示

 13 webapck-dev-server 要安装，他可以自动刷新页面，更新修改的代码。

配置文件中： "start":"webapck-dev-server" 

devServer: {
    contentBase: './dist', //服务器使用的地址
    open: true, // 设置为true时 自动打开浏览器，且由于服务器的作用，打开浏览器的地址是 http协议，否则单独打开html文件的协议是file://,这样无法使用ajax请求
    port: 8080, //开启的服务器端口
　　 proxy:{    //在这里做的配置代理，访问本地的/api 接口 都会跑到 代理的网址上去
　　    '/api' : 'http://localhost:8000'
　　 }

},

14 开启HMR热更新模式：即如果你更新了代码，页面不会刷新，只是修改你更改的部分，这样会保持页面原来的操作态；

1 ） 首先，设置devserver的 open

devServer: {
    contentBase: './dist',
    open: true, 
    port: 8080,
    hot: true  //这里

 },

2） 然后使用webpack自带的热更新插件，要先引入webpack

const webpack = require('webpack');
plugins: [
    new webpack.HotModuleReplacementPlugin()
]

15 上面修改css生效了 但是对于js 文件修改后 页面没有更新，看下面代码：

也就是每次更新 都要删掉 之前对应的 代码 在更新，

之所以css和vue,react等没有这样去做 是因为 使用的 scss-loader  vue-loader  react-loader 等loader已经帮我们内置了这个功能。