zoukankan      html  css  js  c++  java
  • Webpack

    Webpack是一个Javascript应用程序的静态的打包器,其功能包括:将多个Javascript文件进行整合和整理之间的依赖关系,以及实现将高版本的语言转化成低版本的语言(webpack只会转化部分的高版本语言,如需转换所有的还得需要babel转换器),所以需要在loader系统上使用babel转换器。也可构建非JS内容,如图片等 。

    使用:

      全局安装了webpack之后并不能使用webpack命令还得安装webpack-cli ,因为webpack4将一些命令放到了webpack-cli中了。

    npm install --save-dev webpack-cli -g

      webpack的入口和出口文件配置:

    const path = require('path');
    
    module.exports = {
    //   entry: path.join(__dirname,"./src/main.js"), webpack3
      entry: "./src/main.js",//可以是字符串和字符串数组
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
      }
    };

      使用命令进行文件的转化:

    npx webpack   //用在初始安装的webpack文件上
     webpack --mode development

       可以使用npm 脚本来命令:

    //package.json中的scripts中添加 
    
    "scripts": {
        "build": "webpack"
      },
    npm run bulid 直接命令

       在JS文件中加载css文件内容

    //webpack.ocnfig.js 

    const path = require('path'); module.exports = { // entry: path.join(__dirname,"./src/main.js"), webpack3 entry: "./src/main.js",//可以是字符串和字符串数组 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /.css$/, //以 .css 结尾的全部文件,都将被提供给 style-loader 和 css-loader。 use: [ 'style-loader', 'css-loader' ] } ] } };

     webpack和babel下载的时候 :版本必须得安装正确 否则容易出现各种错误,总之想看文档。https://www.npmjs.com/package/babel-loader/v/8.0.5  按照一样的操作即可

  • 相关阅读:
    Tair分布式key/value存储
    Ehcache详细解读
    专访阿里中间件高级专家沈询
    boost之词法解析器spirit
    快速部署Python应用:Nginx+uWSGI配置详解
    CMake如何执行shell命令
    show engine innodb status 详解
    HTTP Request header
    json python api
    mysql 索引对于select速度提升作用实验
  • 原文地址:https://www.cnblogs.com/panjingshuang/p/11974776.html
Copyright © 2011-2022 走看看