zoukankan      html  css  js  c++  java
  • wepack使用

    当前使用的版本:webpack 4.5。

    ⚠️webpack 是需要有 node 环境的,所以在使用之前需要保证你当前安装的有 node。

    安装 webpack:

    npm install webpack --save-dev  (dev 是指的是在开发环境中使用的依赖包)

    一、入门的 webpack 配置 webpack.config.js:

    module.exports = {
        entry:  __dirname + "/app/main.js", //压缩入口
        output: {
          path: __dirname + "/public", //打包后的文件存放的地方
          filename: "bundle.js"//打包后输出文件的文件名
        },
      }
    

    ⚠️需要注意的是:

    1、__dirname 是 node 的全局变量,存储的是文件所在的目录

    2、output 中的 path 是文件打包后的绝对路径,不是相对路径

    3、执行命令的时候,如果 webpack 不是全局安装的,需要加上路径: node_models/.bin/webpack

      直接执行,如果用的是 webpack 4,则会有一个提示说需要单独安装 webpack-cli。

      因为在webpcak 3 中 webpack-cli 是集中在 webpack 中的,而在 webpack 4 为了方便管理维护,将 webpack-cli 分离了出来;所以在如果最初没有安装 webpack-cli 的时候,执行 webpack 命令会有提示说让用户安装 webpack-cli。

    4、还有一种执行方法是 webpack  入口文件路径  打包后输出的文件路径

    二、快捷执行打包任务:

    package.json 添加如下内容:

    "script" : {
        "start": 'webpack' //无论是不是全局安装的webpack,都可以不用写 node_module/.bin/ 这个路径,npm 能自己找到
    }

    然后就可以使用 npm start 来代替上面的 node_module/.bin/webpack 这个繁琐的命令了

    ⚠️start (test也是)是个特殊的命令,通过 npm start 就可以找到对应的命令进行执行,如果不是 start 命令则需要使用:npm run scriptName

    "scripts": {
        "error": "echo "Error: no test specified" && exit 1"
    }
    

    test 命令需要这样执行: npm run error

    他的执行结果就是输出一个错误:

    三、source maps的设置,devtool选项

    1、source-map 单独文件生成,功能完整,但是打包速度过慢

    2、cheap-module-source-map 单独文件生成,不带映射,只能对应行,不能对应列,不便调试

    3、eval-source-map 在同一个文件中生成干净完整的source-map,但是有完全问题;开发阶段首选

    4、cheap-module-eval-source-map 速度最快,没有映射,缺点同3

    使用,在wapack的配置中添加 devtool 即可:

    module.exports = {
      devtool: 'eval-source-map',
      entry:  __dirname + "/app/main.js",
      output: {
        path: __dirname + "/public",
        filename: "bundle.js"
      }
    } 

    四、浏览器监听代码修改,并自动刷新---webpack服务器:webpack-dev-server

    安装该插件:npm install webpack-dev-server --save-dev

    devServer 配置:

    1、contentBase:服务器从哪里获取内容。默认为根目录,如果是其他目录的话,进行修改即可,建议使用绝对路径;可以从多个目录获取,用数组即可

    2、port:监听哪个端口的请求,默认为 8080

    3、inline:为 true 时则会进行热替换

    4、historyApiFallback:使用 HTML5 History Api 时使用,如果设置为 true 则表示不跳转

    使用:

    module.exports = {
      devtool: 'eval-source-map',
    
      entry:  __dirname + "/app/main.js",
      output: {
        path: __dirname + "/public",
        filename: "bundle.js"
      },
    
      devServer: {
        contentBase: path.join(__dirname, "public"),//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
      } 
    }
    

    同时需要在 package.json 的 scripts 对象中添加

    "scripts": {
        "server": "webpack-dev-server --open"
      }

    执行 npm run server 命令就可以看到效果,这时修改文件,页面内容实时更新则说明配置成功

    五:Loader

    1、用于对模块的源代码进行转换

    2、可以使你在 import 或"加载"模块时预处理文件

    3、可以将文件从不同的语言(如 TypeScript)转换为 JavaScript

    4、将内联图像转换为 data URL

    5、他甚至允许你直接在 JavaScript 模块中 import CSS文件

    如果要使用 loader 则需要安装对应的 loader

    npm install css-loader --save-dev    告诉 webpack 加载 css

    npm install js-loader --save-dev    将 TypeScript 转化成 js

    然后在 webpack.config.js 中配置 module 对象

    module.exports = {
      module: {
        rules: [
          { test: /.css$/, use: 'css-loader' }, // 给每个 css 文件使用 css-loader
          { test: /.ts$/, use: 'ts-loader' } // 给每个 ts 文件使用 ts-loader
        ]
      }
    };
    

      

  • 相关阅读:
    说到算法怎么可以少了排序呢~
    常用的re正则
    书到用时方恨少-- 正则,待修
    闲逛各个牛人的博客,观后感
    二叉树:B+tree等
    列表,链表,队列
    简述各种锁
    MongoDB
    python爬虫基础应用----爬取无反爬视频网站
    Django缓存管理的6种方法
  • 原文地址:https://www.cnblogs.com/z-one/p/8813806.html
Copyright © 2011-2022 走看看