精华内容
下载资源
问答
  • WebPack

    千次阅读 2019-07-11 15:10:25
    WebPack 入门

    一、webpack 常用命令 

    • 查看webpack版本信息:npm info webpack versions

    • 全局安装:npm install webpack webpack-cli -g
    • 全局安装指定版本:npm install webpack@4.16.5 webpack-cli -g
    • 卸载全局安装:npm uninstall webpack webpack-cli -g
    • 查看版本:webpack -v (node.js会在全局的模块目录中去找这个命令,没有安装会找不到这个命令的)

    • 项目内安装:npm install webpack webpack-cli --save-dev(--save-dev可以等价为-D
    • 查看项目内webpack版本:npx webpack -v
    • npm install webpack --save
    • 使用项目webpack打包js文件:npx webpack Xxx.js
    • 使用全局的webpack打包js文件:webpack Xxx.js
    • node -v
    • npm -v
    •  初始化npm:npm init -y
    • 安装项目依赖包:npm install

    注:webpack-cli 能让我们在控制台运行 webpack 命令的,但是按照webpack这个的时候webpack-cli回跟着安装的不用显示的安装


    二、 webpack 配置文件

     index.js

    var Header = require('./header.js');
    var Sidebar = require('./sidebar.js');
    var Content = require('./content.js');
    
    new Header();
    new Sidebar();
    new Content();

     header.js

    function Header() {
    	var dom = document.getElementById('root');
    	var header = document.createElement('div');
    	header.innerText = 'header';
    	dom.append(header);
    }
    
    module.exports = Header;

     content.js

    function Content() {
    	var dom = document.getElementById('root');
    	var content = document.createElement('div');
    	content.innerText = 'content';
    	dom.append(content);
    }
    
    module.exports = Content;

     sidebar.js

    function Sidebar() {
    	var dom = document.getElementById('root');
    	var sidebar = document.createElement('div');
    	sidebar.innerText = 'sidebar';
    	dom.append(sidebar);
    }
    
    module.exports = Sidebar;

     index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>这是最原始的网页开发</title>
    </head>
    <body>
    	<p>这是我们的网页内容</p>
    	<div id='root'></div>
    	<script src='./bundle.js'></script>
    </body>
    </html>

    当我们使用  npx webpack Xxx.js 执行打包命令的时候,似乎没有看见配置文件的影子,其实这个时候使用的是webpack的默认配置

    默认的配置文件:webpack.config.js

    const path = require('path');
    // 配置
    module.exports = {
    	// 1. 项目重那个文件开始打包
    	entry: './src/index.js',
    	// 2. 打包文件放到哪里
    	output: {
    		// 3. 打包好的文件的名字
    		filename: 'bundle.js',
    		// 4. 打包出的文件放在哪个文件夹下 path要是绝对路径
    		// __dirname就是webpack.config.js的绝对路径,和dist结合
            // 不写效果一样,默认就是
    		path: path.resolve(__dirname, 'dist')
    		// 绝对路径
    		// path: path.resolve('F:/Test/GitTest2/')
    	}
    }

     手动指定配置文件: npx webpack --config Xxx.js

    使用 npm scripts 简化配置

     在 package.json 里面有一个scripts属性,这个数据是配置执行脚本的

    {
      "name": "lesson",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "bundle": "webpack"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack-cli": "^3.1.2"
      },
      "dependencies": {
        "webpack": "^4.25.1"
      }
    }
    

    scripts 配置的 webpack 首先会在当前项目中找 webpack,然后才去全局找所以 webpack 前面不需要加 npx, 我配置了webpack.config.js后面就不需要打包的js入口文件了

    现在我们执行打包命名:npm run bundle (npx webpack Xxx.js)

    • npm run bundle -> webpack

    打包输出类容 

    PS F:\Procedure\Html\webpack\01-04\lesson> npx webpack
    Hash: 1b24ce275a9479386bf2
    Version: webpack 4.25.1
    Time: 114ms
    Built at: 2019-07-11 7:53:18 PM
        Asset      Size  Chunks             Chunk Names
    bundle.js  1.36 KiB       0  [emitted]  main
    Entrypoint main = bundle.js
    [0] ./src/index.js 159 bytes {0} [built]
    [1] ./src/header.js 187 bytes {0} [built]
    [2] ./src/sidebar.js 193 bytes {0} [built]
    [3] ./src/content.js 193 bytes {0} [built]

     Chunk Names 输出main,就是entry里面的

    const path = require('path');
    module.exports = {
    	entry:{
    		main:'./src/index.js',
    	},
    	output: {
    		filename: 'bundle.js',
    		path: path.resolve(__dirname, 'dist')
    	}
    }
    WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set
    'mode' option to 'development' or 'production' to enable defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
    const path = require('path');
    module.exports = {
    	// 不配置这个会有警告,但是它会给我们设置成这个
    	// production 打包出的文件会被压缩
    	// development 不压缩
    	mode:'production',
    	entry:{
    		main:'./src/index.js',
    	},
    	output: {
    		filename: 'bundle.js',
    		path: path.resolve(__dirname, 'dist')
    	}
    }

     


    三、 使用WebPack打包其他文件

    file-loader

    打包图片

    webpack.config.js

    const path = require('path');
    
    module.exports = {
    	mode: 'development',
    	entry: {
    		main: './src/index.js'
    	},
    	// webpack默认知道如何处理js模块,但是不知道jpg这种文件怎么打包
    	// 我们这里需要配置
    	module: {
    		// 可以定义多个规则
    		rules: [{
    			// 正则匹配 jpg png gif文件
    			test: /\.(jpg|png|gif)$/,
    			use: {
    				// 定义一个loader 需要手动安装 file-loader (npm install file-loader -D)
    				loader: 'file-loader',
    				// 配置参数
    				options:{
    					// 打包的图片和原图片一模一样(名字后缀)
    					// placeholder 占位符  https://webpack.js.org/loaders/file-loader/
    					name:'[name].[ext]',
    					// 可以指定图片打包的位置(不然在dist目录里面)
    					outputPath:'images/'
    				}
    			} 
    		}]
    	},
    	output: {
    		filename: 'bundle.js',
    		path: path.resolve(__dirname, 'dist')
    	}
    }

     index.js

    import avatar from './avatar.jpg';
    console.log(avatar);
    
    var img = new Image();
    img.src = avatar;
    
    var root = document.getElementById('root');
    root.append(img);

    index.html 

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<div id='root'></div>
    	<script src='./bundle.js'></script>
    </body>
    </html>
    • npm install  file-loader  -D 
    •  npx webpack

    url-loader

    当一个图片文件大于我们配置的值的时候,url-loader 和 file-loader 的效果是一模一样的

    如果图片小于我们设置的值, url-loader 不会打包图片,他会把图片转成base64

    const path = require('path');
    
    module.exports = {
    	mode: 'development',
    	entry: {
    		main: './src/index.js'
    	},
    	module: {
    		rules: [{
    			test: /\.(jpg|png|gif)$/,
    			use: {
    				// 图片转换成 base64
    				// 适合小图片
    				loader: 'url-loader',
    				options: {
    					// name: '[name]_[hash].[ext]',
    					outputPath: 'images/',
    					// 设置图片大小,是转base64还是打包到文件
    					// 小于这个值都会转base64,当图片大于这个值这个时候url-loader和file-loader是一样的
    					// kb
    					limit: 1024000
    				}
    			} 
    		}]
    	},
    	output: {
    		filename: 'bundle.js',
    		path: path.resolve(__dirname, 'dist')
    	}
    }
    {
      "name": "lesson",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "bundle": "webpack"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "file-loader": "^2.0.0",
        "url-loader": "^2.0.1",
        "webpack-cli": "^3.1.2"
      },
      "dependencies": {
        "webpack": "^4.25.1"
      }
    }
    

     

    • npm install --save-dev url-loader  

    或者

    • npm install  url-loader  -D

     

    展开全文
  • Webpack

    2019-09-03 23:17:39
    开发中我们常常要使用模块化的方式,在过程中往往需要使用webpackWebpack是模块管理和打包工具,它可以识别我们代码中的依赖,打包代码,webpack支持的模块化的方式有AMD,comment.js,ES6,css/less/sass,url ...

    开发中我们常常要使用模块化的方式,在过程中往往需要使用webpack,Webpack是模块管理和打包工具,它可以识别我们代码中的依赖,打包代码,webpack支持的模块化的方式有AMD,comment.js,ES6,css/less/sass,url

    模块打包

    文件目录和结构

       

    打包过程图

    安装过程

    安装webpack过程:安装node→查看安装路径指定安装和缓存路径→配置环境变量→全局安装webpack(一劳永逸)

    1.cmd下用path指令查看node安装目录(我的为D:\node)

    2.在node下创建node_cache和node_global目录

    3.cmd下配置全局安装和缓存路径

        npm config set cache "D:\node\node_global''

        npm config set prefix "D:\node\node_global''

    4.控制面板\系统和安全\系统>高级系统设置下设置环境变量

         用户变量:PATH添加D:\node\node_global

         系统变量NODE_PATH:D:\node\node_global

    5..全局安装webpack

        cnpm install --save-dev webpack -g

    6..全局安装webpack-cli

        cnpm install --save-dev webpack-cli -g

    7.全局安装webpack-dev-server

         cnpm install --save-dev webpack-dev-server -g

    查看node版本:node-v

    查看webpack版本:webpack -v

    全自动打包项目

    打包项目过程:mkdir建目录(dist src script style)→初始化→本地安装webpack和webpack-cli→文件(index.html )→打包

    1.建目录mkdir

    mkdir config dist src

    2.初始化,生成package.json

    webpack init -y

    3.本地安装webpack和webpack-cli

    cnpm install --save-dev webpack webpack-cli

    4.建文件

    touch dist/index.thml src/index.js

    5打包生成node_module

    webpack --mode=development

    配置单入口项目

    1.移除main.js和index.js

    main.js在打包的时候生成,而index.js是默认入口

    2.创建main.js

    touch src/main.js

    2.touch创建配置文件webpack.config.js

    touch config/webpack.config.js

    3.写配置文件内容

    配置文件webpack.config.js用来指定入口文件及输出,使用comment.js语法

    const path = require('path');
    module.exports = {
      mode:'development',
      entry:{
          main:'./src/main.js',
        }, 
      output:{
        path:path.resolve(__dirname,'../dist'),  //打包的路径(绝对路径)
        filename:'[name].js'  //按入口文件命名打包成的文件名
      },
      //模块
      module:{
          rules:[]
      },  
      plugins:[],   / //插件
      devServer:{}  //服务功能配置
    }

    4.在package.json中指定配置文件

    "scripts": {
        "build":"webpack --config=config/webpack.config.js"
      }

    5.cnpm run build //运行webpack

    开启服务

    前提是安装好了webpack-dev-server

    1.webpack.config.js中配置devserver

    devServer:{
          contentBase:path.resolve(__dirname,'../dist'), //基本目录结构
          host:'localhost',  //ip地址
          compress:true, //开启服务器端压缩
          port:8888 //端口
      } //服务功能配置

    2.package.json中添加server

    "scripts": {
    
    "build":"webpack --config=config/webpack.dev.js",
    
    "server":"webpack-dev-server --config=config/webpack.dev.js"  //添加server
    
    }

     3.开启服务:cnpm ren server

    资源文件处理

    打包css

    有引入css的可以使用

    1..下载css-loader和style-loader

        cnpm install css-loader style-loader --save-dev

    2.webpack.config.js的module中配置css的依赖

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

    3..cnpm run server

    终端出现下图即成功

    压缩js

    webpack4使用压缩js代码插件uglifyjs插件的前提是项目内安装了webpack和webpack-cli,项目初始化过,且项目名不能为webpack,有引入js代码的场景可以使用

    1.cnpm install uglifyjs-webpack-plugin --save-dev  //本地安装uglifyjs

    2.配置

        webpack.config.js引入js压缩插件

    const uglify = require('uglifyjs-webpack-plugin');

        webpack.config.js的plugins中创建实例

    plugins:[new uglify()]

    3.npm run  build

    dis静态资源文件中出现js压缩后的文件即成功

    压缩html

    有html文件的场景可以使用

    1.安装html-webpack-plugin 

        cnpm install --save-dev html-webpack-plugin 

    2.webpack.config.js中配置

        webpack.config.js引入html压缩插件

    const htmlPlugin = require('html-webpack-plugin');

        webpack.config.js的plugins中创建实例

    plugins:[
    new htmlPlugin({
                minify:{ //是对html文件进行压缩
                    removeAttributeQuotes:true  //removeAttrubuteQuotes是却掉属性的双引号。
                },
                hash:true, //为了开发中js有缓存效果,所以加入hash,这样可以有效避免缓存JS。
                template:'./src/index.html' //是要打包的html模版路径和文件名称。
               
            })
    ]

    3.cnpm run build

    压缩图片

    有引入图片的场景可以使用

    1.安装解析图片loader

        cnpm install --save-dev file-loader url-loader

    2.webpack.config.js module中配置loader

    {
       test:/\.(png|jpg|gif|jpeg|JPG)/,  //是匹配图片文件后缀名称
       use:[{
           loader:'url-loader', //是指定使用的loader和loader的配置参数
           options:{
               limit:500  //是把小于500B的文件打成Base64的格式,写入JS
                   }
            }]
    }

    3.cnpm run build 

    分离css

    1.分离插件

        npm install --save-dev extract-text-webpack-plugin@next 

    2.webpack.config.js中配置

       webpack.config.js引入插件

    const extraTextPlugin = require('extract-text-webpack-plugin'); //引入css分离插件

         webpack.config.js的plugins中创建实例

    new extractTextPlugin("css/index.css")

          webpack.config.js的module中修改css-loader配置项

    {
         test:/\.css$/,
         use: extractTextPlugin.extract({
             fallback: "style-loader",
             use: "css-loader"
         }),        
    }

    3.cnpm run build

     

    路径处理

    1.webpack.config.js 声明website

    var website ={
        publicPath:"http://localhost:8888/"  //主机和端口
    }

    2.webpack.config.js的output中配置publicPath

    output:{
            publicPath:website.publicPath  //publicPath:主要作用就是处理静态文件路径的。
        }

    处理HTML中的图片

    适用场景:html中用<img src>引用图片及把图片放在指定路径下

    1.安装loader

        cnpm install html-withimg-loader --save-dev 

    2.webpack.config.js的module中配置

    //url loader
    {
        test:/\.(png|jpg|gif|jpeg)/,  //是匹配图片文件后缀名称
        use:[{
            loader:'url-loader', //是指定使用的loader和loader的配置参数
            options:{
                limit:500,  //是把小于500B的文件打成Base64的格式,写入JS
                outputPath:'images/',  //打包后的图片放到images文件夹下
                     }
          }]
    }
    //html处理图片loader
    {
        test: /\.(htm|html)$/i,
        use:[ 'html-withimg-loader'] 
    }

    3.cnpm run dev

    less,sass打包和分离

    1.安装

        npm install --save-dev less less-loader  //less服务和less-loader

        npm install --save-dev  node-sass sass-loader  //sass

        npm install --save-dev extract-text-webpack-plugin@next  //安装分离插件

    2.webpack-dev.config中配置

        webpack-dev.config中引入分离插件

    const extraTextPlugin = require('extract-text-webpack-plugin'); //引入分离插件

        webpack.config.js的plugins中创建实例

     

    .    webpack-dev.config的module配置less-loader

    //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
        }]
     }
    //less打包+分离
    {
        test: /\.less$/,
        use:extractTextPlugin.extract({
            fallback: "style-loader",
            use: [
                {loader:"css-loader"},
                {loader:"less-loader"}
            ]
        }) 
    },
    //sass打包+分离
    {
        test: /\.sass$/,
        use:extractTextPlugin.extract({
            fallback: "style-loader",
            use: [
                {loader:"css-loader"},
                {loader:"sass-loader"}
            ]
        }) 
    },

    3.cnpm run build

    打包并分离好的less和sass代码会出现在静态资源文件style.css中

    常用命令行

    内容 分类 命令 解释

    安装webpack

    webpack-cli

    webpack-dev-server

    全局安装

    npm install -g webpack   //全局安装webpack

    npm install --save-dev webpack -g //全局安装webpack

    cnpm install --save-dev webpack-dev-server -g //全局安装webpack-dev-server

    -g全局
    本地安装

    npm install --save-dev webpack   //安装最新版本
    npm install --save-dev webpack@<version>   //安装安装指定版本

    npm install --save-dev webpack-cli  //支持webpack4

    无指定,默认本地安装

    js打包插件使用的前提

    直接从webpack仓库中安装 npm install webpack@beta //安装最新版本
    npm install webpack/webpack#<tagname/branchname> //安装指定版本
     
    安装插件 支持TypeScript npm install --save-dev typescript ts-node @types/node @types/webpack  支持TypeScript书写配置文件
    安装lodash npm install --save lodash  
    安装uglifyjs cnpm install uglifyjs-webpack-plugin --save-dev 压缩js代码
    压缩html

    cnpm install --save-dev html-webpack-plugin 

    压缩thml打码
    分离代码

    npm install --save-dev extract-text-webpack-plugin //3.0.2版本

    npm install --save-dev extract-text-webpack-plugin@next  //4.0.0版本

    分离代码(css,less,sass都会用到)

    webpack4要用4.0.0版本

    安装loader 支持css和图片 npm install --save-dev style-loader css-loader //支持加载css
    npm install --save-dev file-loader //支持加载图片
    压缩css
    压缩图片

    cnpm install --save-dev file-loader url-loader

    cnpm install  --save-dev html-withimg-loader  

    压缩图片

    url-loader内封装了file-loader,可以不装

    html中图片处理,以及压缩后图片路径处理

    less

    npm install --save-dev less  //安装less服务
    npm install --save-dev less-loader //less-loader

    less打包

    安装less-loader前要安装less服务

    sass

    npm install  node-sass --save-dev 
    npm install  sass-loader --save-dev  

    sass打包

    sass-loader依赖于node-sass

    打包 打包文件 webpack hello.js hello.bundle.js

    可以以下参数

    --module-bind 'css=style-loader!css-loader' //模块绑定

    --watch //解析css模块(支持css)
     --progress  //显示打包的进度
     --modules   //显示打包的模块
     --reasons   //需要打包某模块的原因

    打包项目 webpack webpack4之前版本

    webpack --mode=development //开发环境

    webpack --mode=production //生产环境

    webpack4打包要指定打包环境

    2.模块预处理

     

    3.模块按需处理

     

    展开全文
  • webpack

    2018-03-11 16:30:23
    webpack的使用。一。安装npm install --save-dev webpack (本地安装) npm install --global webpack (全局)二。创建项目。mkdir webpack-demo &amp;&amp; cd webpack-demo npm init -y npm install --...

    webpack的使用。

    一。安装

    npm install --save-dev webpack (本地安装)
    npm install --global webpack (全局)
    二。创建项目。
    mkdir webpack-demo && cd webpack-demo 
    npm init -y
    npm install --save-dev webpack (在当前项目中安装webpack)
    npm install webpack-cli -D

    三。创建对应文件:webpack.config.js, index.js, index.html, dist文件夹(打包后的文件), src文件夹(需要打包的文件)。现在需要打包的是index.js,则把index.js放入src中。

    四。加载不同的文件。

    npm install --save-dev style-loader css-loader (加载css)
    npm install --save-dev file-loader (加载图片)
    npm install --save-dev csv-loader xml-loader (CSV、TSV 和 XML)
    js和json文件可以直接加载。

    五。webpack.config.js

    使用的插件:

    npm install --save-dev html-webpack-plugin (生成HTML文件)
    npm install clean-webpack-plugin --save-dev (清理指定的文件夹)
    module.export = {
      entry: './src/index.js',  => 单文件人口;
      //entry: {
      //     a: './src/a.js',
      //     b: './src/b.js'
      //     }
      plugins:{
               new  clearWebpackPlugin(['dist'])  // 清除指定文件夹
               new htmlWebpackPlugin({           // 生成HTML文件。
                   title: 'output message'
               })
      },
      output: {
              filename: '[name].bundle.js',
              path: resolve(_dirname,'dist')
       },
     module: {
         rules: [
           {
             test: /\.css$/,
             use: [
               'style-loader',
               'css-loader'
             ]
           },
           {
             test: /\.(png|svg|jpg|gif)$/,
             use: [
               'file-loader'
             ]
           },
           {
             test: /\.(woff|woff2|eot|ttf|otf)$/,
             use: [
               'file-loader'
             ]
           },
           {
             test: /\.(csv|tsv)$/,
             use: [
               'csv-loader'
             ]
           },
           {
             test: /\.xml$/,
             use: [
               'xml-loader'
             ]
           }
         ]
       }
    }
    webpack的深入理解请参考官方文档:官方文档地址


    展开全文
  • Webpack的使用

    万次阅读 2020-08-31 17:27:25
    Webpack 的使用 安装webpack: cnpm install webpack -g cnpm install webpack-cli -g 查看安装版本: webpack -v 4.44.1 webpack-cli -v 3.3.12 使用webpack: 创建一个空文件夹 mywp01 作为项目目录 创建 ...

    Webpack 的使用


    安装webpack:

    cnpm install webpack -g
    
    cnpm install webpack-cli -g
    

    查看安装版本:

    webpack -v
    4.44.1
    
    webpack-cli -v
    3.3.12
    

    使用webpack:

    • 创建一个空文件夹 mywp01 作为项目目录
    • 创建 modules 文件夹,在该文件夹内创建 hello.jsmain.js

    hello.js

    exports.sayHi = function () {
        document.write("<h1>Hello,BLU!</h1>")
    }
    

    main.js

    var hello = require("./hello");
    hello.sayHi();
    
    • 在 mywp01 目录下创建 webpack.config.js 文件:
    module.exports = {
      entry: './modules/main.js',
      output: {
          filename: "./js/bundle.js"
      }
    };
    
    • 使用 webpack 命令打包,在 dist/js 目录下生成了 bundle.js 文件
    !function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){n(1).sayHi()},function(e,t){t.sayHi=function(){document.write("<h1>Hello,BLU!</h1>")}}]);
    
    • 创建 index.html 文件并引入生成的 bundle.js 文件
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <script src="dist/js/bundle.js"></script>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • vue cli3配置image-webpack-loader

    万次阅读 2019-12-04 12:08:04
    vue cli3配置image-webpack-loader对图片进行压缩优化 安装 npm install image-webpack-loader --save-dev 配置vue.config.js chainWebpack: config => { config.plugins.delete('prefetch') config.plugin('...
  • 前端工程化-ESLint+webpack

    万次阅读 2020-08-14 18:52:40
    webpack
  • webpack打包

    千次阅读 2019-07-12 16:41:51
    webpack打包
  • 查看webpack版本

    万次阅读 2019-02-09 17:10:45
    1,npm info webpack   2,webpack -v 如果没有出现,npm install --global webpack-cli,因为 注意:webpack 4x以上,webpack将命令相关的内容都放到了webpack-cli,所以还需要安装webpack-cli; 之后再...
  • webpack以及gulp介绍

    万次阅读 2019-07-17 22:07:30
    webpack webpack3和4的区别: 4是零配置的; $npm i webpack -D $npm i webpack -cli -D 就可以在命令行使用webpack命令; 入口文件可以写成字符串,数组或者对象。 写成数组就打包到一起,写成对象会分片打包。 ...
  • npm install webpack --save-dev npm install webpack-dev-server --save-dev D:\Development\web\webpack-study&gt;npm install webpack-cli D:\Development\web\webpack-study&gt;npm run...
  • Webpack学习

    千次阅读 2019-11-14 10:31:54
    Webpack的介绍和使用:基本使用、打包 css 和图片文件、 测试环境下自动编译打包、使用 webpack 插件
  • Webpack打包

    万次阅读 2020-02-21 18:36:50
    什么是webpack 模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。 为什么使用...
  • 1. 安装webpack webpack-cli npm install -g webpack webpack-cli 2. 查看webpack 版本 webpack -v 报错 /usr/local/lib/node_modules/webpack/lib/cli.js:66 .replace( ^ SyntaxError: Invalid regular ...
  • 问题:安装的webpackwebpack-cli。运行webpack命令提示: One CLI for webpack must be installed. These are recommended choices, delivered as separate packages: webpack-cli ...
  • 如果你是已经安装好webpackwebpack -cli的话,还是遇到 这种下面这种问题的话,这样的话问题很好解决。 webpack not installed Install webpack to start bundling: $ npm install --save-dev webpack 如果...
  • 1.使用webpack -v检测 说明webpack已经安装但是打包又提示webpack not installed 4.43.0 2.百度搜索说版本问题 于是卸载重装 npm uninstall webpack -g 重装指定版本webpack 这里装的是3.5.5 npm install webpack@...
  • webpack之jest-webpack测试

    千次阅读 2020-05-28 11:24:53
    3.新建一个跟webpack.config.js同级的tests文件夹, 因为jest-webpack测试的时候会去找这个文件 4.在src/js/index.js文件夹中写入 5.在tests文件下面创建一个index.test.js文件, 这个文件需要require需要测试的...
  • 简单地使用webpack进行打包

    万次阅读 2018-07-02 09:14:27
    之前写的有些零散,现在一步步再重新写.一.确保已经安装了nodeJS之后.二. 创建webpack-demo,我的是f盘下... 接下来装webpacknpm install webpack --save-dev安装完成:查看项目下,发现已经:5.然后用编译器打开当前项目...
  • webpack的ProvidePlugin配置

    万次阅读 2017-11-23 14:39:30
    webpack
  • webpack入门启动webpack工程

    千次阅读 2018-10-11 14:35:39
    安装完webpack以及webpack-dev-server 参照: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83011108 添加代码: 1.首先在目录demo下创建一个js文件:webpack.config.js 并初始化它的内容: ...
  • 全局安装webpack/webpack-cli npm install -g webpack //全局安装webpack npm install webpack-cli -g //全局安装webpack-cli 两个同时安装,webpack -v才能检查到安装的版本。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 162,787
精华内容 65,114
关键字:

webpack