首页 👨‍💻计算机

webpack-01

image-20210807221945190

1,webpack安装和使用

  1. 新建一个空目录,并运行npm init -y 命令,初始化包管理器配置文件 package.json
  2. 新建src源代码目录
  3. 新建src ->index.html 首页和 src -> index.js脚本文件
  4. 初始化首页基本结构
  5. 运行 npm install jquery -S命令,安装jquery
  6. 通过ES6 模块化的方式导入jquery, 实现列表隔行变色效果

2,安装webpack

安装命令

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

development

  1. 开发环境
  2. 不会打包生成的文件进行代码压缩和性能优化
  3. 打包速度快,适合开发阶段使用

production

  1. 生产环境
  2. 会对打包生成的文件进行过代码压缩和性能优化
  3. 打包速度很慢,仅适合在项目发布阶段使用

运行

npm run dev

3,自动保存webpack

  1. 安装webpack-dev-serve

​ 命令:npm install webpack-dev-server@3.11.2 -D

生成的xxx.js存在内存

  1. 安装html-webpack-plugin

​ 命令:npm install html-webpack-plugin@5.3.2 -D

4,loader的使用

  • 打包处理css文件

    1. 运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令,安装处理css文件的loader
    2. 运行 npm i less-loader@10.0.1 less@4.1.1 -D 命令,安装处理css文件的loader
    3. 运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令,安装处理url路径相关的文件
    4. 运行 npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D 处理高级语法
    5. 运行打包自定义dist目录结构 npm install --save-dev clean-webpack-plugin

### webpack.config.js

const path = require('path');
// 使用node.js中到处语法,向外导出一个webpack的配置对象
// 导入html-webpack-plugin这个插件
const HtmlPlugin=require('html-webpack-plugin')
// 2 new 构造函数,创建插件的实例对象
const htmlPlugin=new HtmlPlugin({
    template:'./src/index.html',
    filename:'./index.html'
})

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports ={
    //代表webpack运行模式,可选值两个development和production
    mode: 'development',
    // 指定生成的文件要存放到那里
    entry: path.join(__dirname, './src/index1.js'),
    // 指定生成的文件要存放到哪里
    output: {
        //存放到目录
        path: path.join(__dirname, 'dist'),
        //生成的文件名
        filename:'js/bundle.js'
    },
    //3,插件的数组,将来webpack在运行时,回家再并调用这些插件
    plugins: [htmlPlugin,new CleanWebpackPlugin()],
    devServer: {
      //打包成功后自动打开浏览器
      open:true,
      //自定义端口
      port:8080,
      host: '127.0.0.1'
      //自定义主机配置
    },
    // 当webpack发现某个文件处理不了的时候,会查找webpack.config.js这个配置文件
    // 看module.rules数组中,是否配置了对应的loader加载器
    // webpack把index.css这个文件,先转交给最后一个loader进行处理(先转交给css-loader)
    // 当style-loader处理完毕之后,发现没有下一个roader了,于是就把处理的结果转交给了webpack
    // webpack把style-loader处理的结果,合并到/dist/bundle.js中,最终生成打包文件
    module: {
      rules:[
        //定义了不同模块对应的roader
        // 处理css的loader
        {test:/\.css$/,use:['style-loader','css-loader']},
        // 处理less的loader
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
        // 处理图片文件的loader 只有一个,则指传递一个字符串也行,如果多个要指定数组
        {test:/\.jpg|png|gif$/,use:'url-loader?limit=22229&outputPath=images'},
        // 配置babel-loader的时候,一定要排除node_modules目录中的js文件
        {test: /\.js$/,use:'babel-loader',exclude:/node_modules/}

      ]
    }

}

5,打包发布

  1. 创建babel.config.js 配置
module.exports={
  //声明bable 可用插件
  //将来,webpack 再调用babel-loader的时候。会先加载plugins插件加起来使用
  plugins: [['@babel/plugin-proposal-decorators',{ legacy:true}]]
}

Source Map

Source Map 就是一个信息文件,里面存储着位置信息,也就是说,Source Map 文件中存储着压缩混淆后的代码,对应的转换前的位置

有了他,出错的时候,出错工具将直接显示原始代码,而不是转换后的代码,能够极大的方便后期的调用

  1. 开发环境下

    • 建议把devtool 的值设置为eval-source-map
    • 好处:可以精准定位到具体的错误行
  2. 生产环境下:

    • 建议关闭Source Map或将devtool的值设置为nosources-source-map
    • 好处:防止源码泄露,提高网站安全性



文章评论

目录