webpack_webpack配置 - CSDN
  • 在本课程中,首先介绍了webpack打包工具的基础知识,安装过程,然后介绍工具如何打包第三方插件、打包样式的方法,后,介绍打包工具的配置,并详细介绍如何将项目部署到服务端的全部流程。
  • Webpack的基本使用

    2020-06-07 18:54:47
    一、什么是Webpack Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less...

    一、什么是Webpack

    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

    从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。

    在这里插入图片描述

    二、Webpack安装

    1、全局安装

    npm install -g webpack webpack-cli
    

    2、安装后查看版本号

    webpack -v
    

    三、初始化项目

    1、创建webpack文件夹

    进入webpack目录,执行命令

    npm init -y
    

    2、创建src文件夹

    3、src下创建common.js

    exports.info = function (str) {
        document.write(str);
    }
    

    4、src下创建utils.js

    exports.add = function (a, b) {
        return a + b;
    }
    

    5、src下创建main.js

    const common = require('./common');
    const utils = require('./utils');
    common.info('Hello world!' + utils.add(100, 200));
    

    四、JS打包

    1、webpack目录下创建配置文件webpack.config.js

    以下配置的意思是:读取当前项目目录下src文件夹中的main.js(入口文件)内容,分析资源依赖,把相关的js文件打包,打包后的文件放入当前目录的dist文件夹下,打包后的js文件名为bundle.js

    const path = require("path"); //Node.js内置模块
    module.exports = {
        entry: './src/main.js', //配置入口文件
        output: {
       path: path.resolve(__dirname, './dist'), //输出路径,__dirname:当前文件所在路径
            filename: 'bundle.js' //输出文件
        }
    }
    

    2、命令行执行编译命令

    webpack #有黄色警告
    webpack --mode=development #没有警告
    #执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩
    

    也可以配置项目的npm运行命令,修改package.json文件

    "scripts": {
        //...,
        "dev": "webpack --mode=development"
     }
    

    运行npm命令执行打包

    npm run dev
    

    3、webpack目录下创建index.html

    引用bundle.js

    <body>
        <script src="dist/bundle.js"></script>
    </body>
    

    4、浏览器中查看index.html

    五、CSS打包

    1、安装style-loader和 css-loader

    Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。

    Loader 可以理解为是模块和资源的转换器。

    首先我们需要安装相关Loader插件,css-loader 是将 css 装载到 javascript;style-loader 是让 javascript 认识css

    npm install --save-dev style-loader css-loader 
    

    2、修改webpack.config.js

    const path = require("path"); //Node.js内置模块
    module.exports = {
        //...,
        output:{},
        module: {
            rules: [  
                {  
                    test: /\.css$/,    //打包规则应用到以css结尾的文件上
                    use: ['style-loader', 'css-loader']
                }  
            ]  
        }
    }
    

    3、在src文件夹创建style.css

    body{
        background:pink;
    }
    

    4、修改main.js

    在第一行引入style.css

    require('./style.css');
    

    5、浏览器中查看index.html

    看看背景是不是变成粉色啦?

    展开全文
  • 博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目.流程webpack安装 Step 1: 首先安装Node.js, 可以去Node...

    博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目;

    注: 此篇博客适用于webpack2.x, 对于4.x版本变化还挺大的, 过一阵子会再写一篇, 点关注不走丢哦

    流程

    webpack安装

    • Step 1: 首先安装Node.js, 可以去Node.js官网下载.

    • Step 2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中

    npm install webpack -g
    
    • Step 3: 使用Git Bash here 或者 cmd cd命令使当前目录转到当前项目的目录下, 然后输入下面这段命令
      npm init
      这里写图片描述
      接下来会弹出一些信息, 就是一些项目名和一些参数的描述, 可以全部按回车使用默认信息, 完成之后项目文件夹下会生成一个package.json的文件
      这里写图片描述
      这样webpack就安装完成了.




    webpack配置

    • Step1: 创建项目文件夹, 名字自起, 但路径名不要包含中文, 以及项目名也不要叫"webpack", 并且不要包含大写字母.
      例:这里写图片描述

    • Step2: 接下来创建并编写配置文件. 首先我们先介绍几个配置文件的参数.

      • entry: 是 页面入口文件配置 (html文件引入唯一的js 文件)
      • output:对应输出项配置
        • path :入口文件最终要输出到哪里,
        • filename:输出文件的名称
        • publicPath:公共资源路径
    • Step3: 在你的项目目录下创建webpack.config.js配置文件, 通过这个文件进行webpack的配置, 并且还要创建一些路径保存基本文件. 例如:
      这里写图片描述
      src文件夹
      这里写图片描述

    • Step4: 在src的js下创建一个入口文件, 我创建的叫做entry.js, 在项目目录再创建一个index.html用来调试使用. 编写webpack.config.js文件,

      //webpack.config.js
      module.exports = {
          entry : './src/js/entry.js',//入口文件
          output : {//输出文件
              filename : 'index.js',//输出文件名
              path : __dirname + '/out'//输出文件路径
          },
      

    }
    ```
    我们随便在index.html和入口文件entry.js写点什么看看是否成功配置,

    ```
    //index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>ss</title>
    </head>
    <body>
    111
        <script src="./out/index.js"></script>//注意在这里引入的是打包完成的js文件
    </body>
    </html>
    ```
    
    
    ```javascript
    //entry.js
    console.log('1234');
    ```
    之后使用Git Bash here 或者 cmd cd命令使目录为当前项目目录, 输入**webpack**或者**webpack -w**命令, 查看index.html是否成功console出1234;
    

    webpack 和 webpack -w 区别
    webpack -w可以对项目打包并且实时监控, 当前配置文件下的文件如果发生更改时重新打包, 但如果webpack的配置文件即webpack.config.js更改时还是要通过webpack进行打包.(退出webpack -w 操作 ctrl+c)


    ### webpack loader加载器

    接下来我们继续配置loader, 通过加载器处理文件:比如 sass less 等, 告知 webpack 每一种文件都需要使用什么加载器来处理。

    • **Step1: **为了方便我们先统一把所有的包都先下载下来, 下面再慢慢解释.

      npm install babel-loader babel babel-core css-loader style-loader  url-loader file-loader less-loader less  --save-dev 
      
      

    - **Step2: **下载完成后, 我们修改webpack.config.js文件, 将加载器引入.
    ```
    module.exports = {
        entry :  './src/js/entry.js',
        output : {
            filename : 'index.js',
            path : __dirname + '/out'
        },
        module : {
            rules: [
                {test: /.js$/, use: ['babel-loader']},
                {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/
                //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/
                {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/
                {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/
            ]
        },
        }
    ```
    <br>
    
    • **Step3: **接下来我们先测试css, 我们在项目文件夹下的src文件夹下创建index.css. 随便写一点属性.

      //index.css
      .demo1 {
          width: 100px;
          height: 100px;
          background: red;
      }
      .demo2 {
          width: 200px;
          height: 200px;
          background: orange;
      }
      
      //index.html
      <!DOCTYPE html>
      
    text
    ``` 因为在webpack中所有文件都是模块, 所以必须要将css引入. 在刚刚的entry.js中添加如下代码.
    ```javascript
    //entry.js
    require('../css/index.css');//引入css文件
    console.log("1234");
    ```
    
    打包webpack一下看看效果
    ![这里写图片描述](https://img-blog.csdn.net/20170506175719289?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY19raXRl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)<br>
    
    • **Step4: **当有多个js文件时, 如何进行引入呢? 接下来我们做一个简单小功能来说明这个问题, 让我们点击方块的时候, 方块变大.

      接下来在src的js文件夹下创建一个基本的工具tool.js (很多小的问题都被我扩大化了, 只是为了说明问题不一定适用)

      //tool.js
      var tool = {//获取DOM元素
          getDom: function(className) {
              return document.getElementsByClassName(className)[0];
          }
      }
      
      module.exports = tool;//模块出口
      

      src的js下创建一个demo1.js文件, demo2.js同理

      var obj = require('./tool.js');
          var demo1 = {
          init: function() {
              this.bindEvent();
          },
          bindEvent: function() {
              //var demo1 = document.getElementsByClassName('demo1')[0];
              var demo1 = obj.getDom('demo1');
              demo1.onclick = this.changeStyle;
          },
          changeStyle: function() {
              this.style.width = '200px';
              this.style.height = '200px';
              this.style.background = 'green';
              console.log('1');
          }
      }
      
      module.exports = demo1;
      

      修改入口文件entry.js

      require('../css/index.css');
      
      var demo1 = require('../js/demo1.js');
      var demo2 = require('../js/demo2.js');
      
          demo1.init();
          demo2.init();
      

      webpack一下, 看看效果
      这里写图片描述



    关于图片的打包

    • **Step1: **在img文件夹下随便找一个小一点的图片放进去.

    • **Step2: **修改entry.js

      require('../css/index.css');
      
      var demo1 = require('../js/demo1.js');
      var demo2 = require('../js/demo2.js');
      
          demo1.init();
          demo2.init();
      
      var oImg = new Image();
      oImg.src = require('../img/1.gif');//当成模块引入图片
      document.body.appendChild(oImg);
      

      由于我们引入的是静态资源, 在webpack.config.js中修改一下

      module.exports = {
      	    entry :  './src/js/entry.js',
      	    output : {
      	        filename : 'index.js',
      	        publicPath: __dirname + '/out',//添加静态资源, 否则会出现路径错误
      	        path : __dirname + '/out'
      	    },
      	    module : {
      	        rules: [
      	            {test: /.js$/, use: ['babel-loader']},
      	            {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/
      	            //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/
      	            {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/
      	            {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/
      	        ]
      	    },
      }
      

      大家自己webpack看看效果



    webpack进阶设定

    我们在项目中有多个html文件时怎么处理呢?, 接下来我们重新设定配置文件, webpack.config.js

    	module.exports = {
    		    entry : {index1: './src/js/entry.js', index2: './src/js/entry2.js'},
    	    output : {
    		        filename : '[name].js',//这样就可以生成两个js文件, 名字分别为index1.js, 和index2.js
    		        publicPath: __dirname + '/out',//添加静态资源, 否则会出现路径错误
    		        path : __dirname + '/out'
    		    },
    		    module : {
    		        rules: [
    		            {test: /.js$/, use: ['babel-loader']},
    		            {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/
    		            //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/
    		            {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/
    		            {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/
    		        ]
    		    },
    	}
    


    webpack插件使用

    首先我们由于要使用webpack插件, 因此我们要重新下载一下webpack包, 将目录定位到当前项目目录, 输入npm install webpack
    之后我们修改webpack.config.js, 将下面代码放到配置文件开头. 这样就可以使用插件了

    var webpack = require('webpack');
    

    将插件信息写到配置文件里

    var webpack = require('webpack');
    var uglifyPlugin = new webpack.optimize.UglifyJsPlugin({minimize: true});//代码压缩
    
    var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin('common');//把公共模块提取出来, 并取名为'common'(名字自起), webpack之后再out文件夹下生成common.js, 测试时记得引入提取出来的公共模块js文件
    
    var ExtractTextPlugin = require("extract-text-webpack-plugin");//将css独立引入变成link标签形式, 使用该插件需要独立下载'npm install extract-text-webpack-plugin --save-dev', 同时下面的rules也必须更改
    
    var providePlugin = new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'});//引入jquery
    
    
    
    module.exports = {
        entry : {index: './src/js/entry.js', index2: './src/js/entry2.js'},
        output : {
            filename : '[name].js',
            publicPath: __dirname + '/out',
            path : __dirname + '/out'
        },
        module : {
            rules: [
                {test: /.js$/, use: ['babel-loader']},
                //{test: /.css$/, use: ['style-loader', 'css-loader']},
                {test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},
                {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},
                {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
            ]
        },
        plugins: [uglifyPlugin, CommonsChunkPlugin, new ExtractTextPlugin('[name].css'),providePlugin]//插件集合
    }
    


    webpack服务器

    首先先定位目录输入命令 npm install webpack-dev-server -g, 修改webpack.config.js文件

    publicPath: 'http://localhost:8080/out',
    

    html文件所引用的目录也要更改:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>text</title>
         <link rel="stylesheet" href="http://localhost:8080/out/index.css">
    </head>
    <body>
        <a href="http://localhost:8080/index2.html">11</a>
        <div class="demo1"></div>
        <div class="demo2"></div>
        <script src="http://localhost:8080/out/common.js"></script>
        <script src="http://localhost:8080/out/index.js"></script>
    </body>
    </html>
    

    webpack-dev-server一下看看效果

    小工具: webpace-dev-server --devtool eval-source-map --progess --colors打包时输入这一行可以直接找到文件如果出错时的位置

    小知识点: 上面这一句话如果觉得太长可以将

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "xuan": "webpack-dev-server --devtool eval-source-map --progress --colors"
      },
    

    这一段代码放到项目目录下的package.json里, 这样调试时如果输入npm run xuan就等于输入那一长串代码

    展开全文
  • 说起Webpack ,不知道你对它有哪些了解呢!或许正在屏幕前的你,1秒前刚刚接受这个词汇,那么学完这门课程,Webpack 4.X小白的称号将离你远去,你将熟练掌握webpack4.x版本的用法,以及新版本的特性,内容全面,覆盖...
  • 一、全面理解webpack 1、什么是 webpack?  webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理,它能有Grunt或Gulp...

    一、全面理解webpack

    1、什么是 webpack?

           webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。webpack的官网是 https://webpack.github.io/ ,文档地址是https://webpack.github.io/docs,官网对webpack的定义是MODULE BUNDLER,他的目的就是把有依赖关系的各种文件打包成一系列的静态资源。 请看下图:

    2、webpack 的优势

    其优势主要可以归类为如下几个:

    1. webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
    2. 支持很多模块加载器的调用,可以使模块加载器灵活定制,比如babel-loader加载器,该加载器能使我们使用ES6的语法来编写代码;less-loader加载器,可以将less编译成css文件;
    3. 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。
    4. 可以通过配置打包成多个文件,有效的利用浏览器的缓存功能提升性能。

    3、wepback它的目标是是什么?

    webpack它能将依赖的模块转化成可以代表这些包的静态文件

    • 将依赖的模块分片化,并且按需加载
    • 解决大型项目初始化加载慢的问题
    • 每一个静态文件都可以看成一个模块
    • 可以整合第三方库
    • 能够在大型项目中运用
    • 可以自定义切割模块的方式

    4、webpack较之其他类似工具有什么不同?

    • 有同步和异步两种不同的加载方式
    • Loader,加载器可以将其他资源整合到JS文件中,通过这种方式,可以讲所有的源文件形成一个模块
    • 优秀的语法分析能力,支持 CommonJs AMD 规范
    • 有丰富的开源插件库,可以根据自己的需求自定义webpack的配置

    5、webpack为什么要将所有资源放在一个文件里面?

    我们知道,对于浏览器来说,加载的资源越少,响应的速度也就越快,所以有时候我们为了优化浏览器的性能,会尽可能的将资源合并到一个主文件app.js里面。但是这导致的很大的缺点:

    • 当你的项目十分庞大的时候,不同的页面不能做到按需加载,而是将所有的资源一并加载,耗费时间长,性能降低。
    • 会导致依赖库之间关系的混乱,特别是大型项目时,会变得难以维护和跟踪。比如:哪些文件是需要A模块加载完后才能执行的?哪些页面会受到多个样式表同时影响的? 等许多问题。

    而webpack可以很好的解决以上缺点,因为它是一个十分聪明的模块打包系统,当你正确配置后,它会比你想象中的更强大,更优秀。

    二、开启wbpack之旅

    安装步骤如下:

    1、生成package.json文件;

    先装好node和npm,因为webpack是一个基于node的项目。然后首先我们需要在根目录下生成package.json文件,需要进入项目文件内根目录下执行如下命令:npm init

    如上通过一问一答的方式后会在根目录下生成package.json文件,如下所示:

    2 . 通过全局安装webpack

    执行命令如下:npm install -g webpack 如下所示:

    在c盘下会生成node_modules文件夹中会包含webpack,此时此刻我们可以使用webpack命令了;

    在常规项目中把webpack依赖加入到package.json

    npm init npm install webpack --save

    更详尽的安装方法个可以参考webpack安装

    3. 配置webpack

    每个目录下都必须有一个webpack.config.js,它的作用就好比Gulpfile.js、或者 Gruntfile.js,就是一个项目配置,告诉webpack需要做什么。

    首先先贴上一个比较完整的webpack.config.js的代码,再详细介绍:

    //详细的webpack.config.js结构分析:
    var path = require('path');
    var webpack = require('webpack');
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    var TransferWebpackPlugin = require('transfer-webpack-plugin');
     
    module.exports = {
        devtool: 'source-map',//由于打包后的代码是合并以后的代码,不利于排错和定位,只需要在config中添加,这样出错以后就会采用source-map的形式直接显示你出错代码的位置。
        //noParse:[/jquery/],//表示跳过jquery,不对其进行编译,这样可以提高打包的速度
        //页面入口文件配置
        entry: {
            page1: "./src/index.js",
            //page2: ["./src/index.js", "./src/main.js"],支持数组形式,将加载数组中的所有模块,但以最后一个模块作为输出
        },
        //入口文件输出配置
        output: {
            path: "dist/js/page",
            filename: "[name].bundle.js",// page1.bundle.js 和 page2.bundle.js,并存放到 ./dist/js/page 文件夹下。
            publicPath: "/dist/"    //网站运行时的访问路径。
        },
        resolveLoader: {
            //指定默认的loader路径,否则依赖走到上游会找不到loader
            root: path.join(__dirname, 'node_modules'),
            alias: {//给自己写的loader设置别名
                "seajs-loader": path.resolve( __dirname, "./web_modules/seajs-loader.js" )
            }
        },
        //新建一个开发服务器,并且当代码更新的时候自动刷新浏览器。
        devServer: {
            historyApiFallback: true,
            noInfo: true,
            hot: true,
            inline: true,
            progress: true,
            port:9090 //端口你可以自定义
        },
        module: {
            // module.loaders 是最关键的一块配置。它告知 webpack每一种文件都需要使用什么加载器来处理:
            loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },//.css 文件使用 style-loader 和 css-loader 来处理.
            //{ test: /\.css$/, loader: 'style!css' },其他写法1、"-loader"其实是可以省略不写的,多个loader之间用“!”连接起来。
            //{ test: /\.css$/, loaders: ["style", "css"] },其他写法2、用loaders数组形式;
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理。
            //在chrome中我们通过sourcemap可以直接调试less、sass源文件文件
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.less$/, loader: 'style!css!less?sourceMap'},//.less 文件使用 style-loader、css-loader 和 less-loader 来编译处理
            //.js 文件使用babel-loader来编译处理,设置exclude用来排除node_modules这个文件夹中的代码
            { test: /\.js$/, loader: 'babel!jsx',exclude: /node_modules/ }, 
            { test: /\.jsx$/, loader: "jsx-loader?harmony" },//.jsx 文件使用 jsx-loader 来编译处理
            { test: /\.json$/,loader: 'json'},
            //{ test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=8192'}, //图片文件使用 url-loader 来处理,小于8kb的直接转为base64
            {test: /\.(png|jpg|gif|svg)$/,loader: 'url',
                query: {limit: 10000,name: '[name].[ext]?[hash]'}//设置图片名称扩展名
            },
            { test: /\.jade$/, loader: "jade-loader" },//.jade 文件使用 jade-loader 来编译处理
            { test: /\.ejs$/, loader: "ejs-loader" },//.ejs 文件使用 ejs-loader 来编译处理
            { test: /\.handlebars$/, loader: "handlebars-loader" },//.handlebars 文件使用handlebars-loader来编译处理handlebars模板文件
            { test: /\.dot$/, loader: "dot-loader" },//.dot 文件使用 dot-loader 来编译处理dot模板文件
            { test: /\.vue$/, loader: "vue-loader" },//.vue 文件使用 vue-loader 来编译处理
            { test: /\.coffee$/, loader: 'coffee-loader' },//.coffee 文件使用 coffee-loader 来编译处理
            { test: /\.html$/,loader: 'vue-html'},
            { test: /\.woff$/,loader: "url?limit=10000&minetype=application/font-woff"},
            { test: /\.ttf$/,loader: "file"},
            { test: /\.eot$/,loader: "file"},
            { test: /\.svg$/,loader: "file"}
            ]
        },
        //分内置插件和外置插件
        plugins: [
            //使用了一个 CommonsChunkPlugin 的插件,它用于提取多个入口文件的公共脚本部分,然后生成一个common.js来方便多页面之间进行复用。
            new webpack.optimize.CommonsChunkPlugin('common.js'),
            new webpack.optimize.UglifyJsPlugin({//压缩文件
              compressor: {
                warnings: false,//supresses warnings, usually from module minification
              },
              except: ['$super', '$', 'exports', 'require']    //排除关键字(可选)
            }),
            new webpack.DefinePlugin({// definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串
                 __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
                 __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
            }),
            new webpack.ProvidePlugin({//把一个全局变量插入到所有的代码中,支持jQuery plugin的使用;使用ProvidePlugin加载使用频率高的模块
                 //provide $, jQuery and window.jQuery to every script
                 $: "jquery",
                 jQuery: "jquery",
                 "window.jQuery": "jquery"
             }),
            new webpack.NoErrorsPlugin(), //允许错误不打断程序
            new TransferWebpackPlugin([ //把指定文件夹下的文件复制到指定的目录
              {from: 'www'}
            ], path.resolve(__dirname,"src")),
            new HtmlwebpackPlugin({//用于生产符合要求的html文件;
               title: 'Hello World app',
               filename: 'assets/admin.html'
            })
        ],
        //其它解决方案配置
        resolve: {
            root: 'E:/github/flux-example/src', //绝对路径, 查找module的话从这里开始查找(可选)
            extensions: ['', '.js', '.html', '.css', '.scss'], //自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
            alias: {                            //模块别名定义,方便后续直接引用别名,无须多写长长的地址//后续直接 require('AppStore') 即可
                AppStore : 'js/stores/AppStores.js',
                ActionType : 'js/actions/ActionType.js',
                AppAction : 'js/actions/AppAction.js'
            },
            modulesDirectories: [//取相对路径,所以比起 root ,所以会多很多路径。查找module(可选)
                 'node_modules',
                 'bower_components',
                 'lib',
                 'src'
            ]
        }
         
    };
     
    if (process.env.NODE_ENV === 'production') {
      module.exports.devtool = '#source-map'
      // http://vue-loader.vuejs.org/en/workflow/production.html
      module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
          'process.env': {
            NODE_ENV: '"production"'
          }
        }),
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false
          }
        }),
        //为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多的模块,并为它们分配最小的ID
        new webpack.optimize.OccurenceOrderPlugin()
      ])
    }

    plugins中包含很多的内置插件和外部插件,它们都有各自的功能,用来处理相关的文件,这里只是罗列了部分,具体用法请看webpack入门和实战(二):全面理解和运用plugins和loader

    就像我在前面提到的,webpack.config.js的写法和在Node里的写法相同,我们主要看的就是文件中的module.exports里面的内容

    • entry 是指入口文件的配置项,它是一个数组的原因是webpack允许多个入口点。
    • output是指输出文件的配置项
      • path - 表示输出文件的路径
      • filename - 表示输出文件的文件名
    • plugins 顾名思义,使用插件可以给webpack添加更多的功能,使webpack更加的灵活和强大,webpack有两种类型的插件:
      • webpack内置的插件

    // 首先要先安装webpack模块

    var webpack = require("webpack");
    module.exports = {
        new webpack.optimize.UglifyJsPlugin({
          compressor: {
            warnings: false,
          },
        })
    };
      •  webpack外置插件
    //npm install component-webpack-plugin 先要在安装该模版
    var ComponentPlugin = require("component-webpack-plugin");
    module.exports = {
        plugins: [
            new ComponentPlugin()
        ]
    }

    更多的插件以及插件的用法,大家可以到webpack的插件上查看。

    • module 配置处理文件的选项
      • loaders 一个含有wepback中能处理不同文件的加载器的数组
        • test 用来匹配相对应文件的正则表达式
        • loaders 告诉webpack要利用哪种加载器来处理test所匹配的文件
      • loaders 的安装方法

            $ npm install xxx-loader --save-dev

    • resolve:其它解决方案配置;
      • resolve.root,绝对路径, 查找module的话从这里开始查找(可选)
      • resolve.modulesDirectories,取相对路径,所以比起 root ,所以会多 parse 很多路径。查找module(可选)
      • resolve.extensions,自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
      • resolve.alias,模块别名定义,方便后续直接引用别名,无须多写长长的地址

    三、利用webpack实现在页面上合理使用打包过后的js文件和图片

    示例如下:

    webpack_test目录结构如下:

    最终完成版的目录结构为:

     index.html代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo1</title>
    </head>
    <body>
        <div id="content"></div>
        <img src="./build/img/demo.png">
        <script src="./build/js/index.js"></script>
    </body>
    </html>

    index.js代码如下:

    require('./index.css');

    index.css代码如下:

    #content{
        width:121px;
        height:140px;
        background-color: red;
    }

    demo.png自己随便找一张即可;

    根据webpack.config.js的配置情况,操作步骤如下:

    • 全局安装webpack,npm install webpack -g
    • 进入到webpack_test目录下,初始化生成package.json文件,npm init
    • 需要安装的loader有css-loader、style-loader、url-loader,webpack, npm install css-loader style-loader url-loader webpack--save-dev
    • 执行webpack,生成打包过后的build/js/index.js,build/img/demo.png
    • 在index.html中引入即可

    效果如下:

     源码地址为:http://download.csdn.net/detail/wdlhao/9612173,有需要的同学可以自行下载练习;

     四、理解webpack支持commonJS和AMD/CMD两种模块机制进行打包

     1.AMD/CMD模式:

         AMD 规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMD,CMD 规范在这里:https://github.com/seajs/seajs/issues/242

    • AMD(Asynchronous Module Definition) 是 RequireJS 在推广过程中对模块定义的规范化产出。(即RequireJS模块规范)

    RequireJS是一个工具库,主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性。它的模块管理遵守AMD规范(Asynchronous Module Definition)。RequireJS的基本思想是,通过define方法,将代码定义为模块;通过require方法,实现代码的模块加载。首先,将require.js嵌入网页,然后就能在网页中进行模块化编程了。<script data-main="scripts/main" src="scripts/require.js"></script>上面代码的data-main属性不可省略,用于指定主代码所在的脚本文件,在上例中为scripts子目录下的main.js文件。用户自定义的代码就放在这个main.js文件中。

    • CMD(Common Module Definition )是 SeaJS 在推广过程中对模块定义的规范化产出。(即SeaJS模块规范)

    SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。

    • CommonJS Modules/2.0 规范,是 BravoJS 在推广过程中对模块定义的规范化产出。

    CommonJS API定义很多普通应用程序(主要指非浏览器的应用)使用的API,从而填补了这个空白。它的终极目标是提供一个类似Python,Ruby和Java标准库。这样的话,开发者可以使用CommonJS API编写应用程序,然后这些应用可以运行在不同的JavaScript解释器和不同的主机环境中。在兼容CommonJS的系统中,你可以实用JavaScript程序开发:

    • 服务器端JavaScript应用程序
    • 命令行工具
    • 图形界面应用程序
    • 混合应用程序(如,Titanium或Adobe AIR)

    还有不少⋯⋯这些规范的目的都是为了 JavaScript 的模块化开发,特别是在浏览器端的。目前这些规范的实现都能达成浏览器端模块化开发的目的。

     2、AMD/CMD模式区别

    2.1从官方推荐的写法上面得出:

    CMD ----- 依赖就近

    Js代码 
    //CMD 
    define(function(require,exports,module){ 
       var a = require('./a'); 
       a.doSomthing(); 
    });

    AMD ----- 依赖前置

    Js代码 
    //AMD 
    define(['./a','./b'],function(a,b){ 
    //...... 
    a.doSomthing(); 
    //...... 
    b.doSomthing(); 
    })

    当然AMD也支持CMD的写法。

    2.2、执行顺序上:

      • CMD是延迟执行,推崇的是as lazy as possible
      • AMD是提前执行,requireJS从2.0开始可以延迟执行

    2.3、api设计角度:

      • CMD的API推崇职责单一,没有全局的require
      • AMD的API默认是一个当多个用:比如require有全局的和局部的。
    展开全文
  • webpack 打包

    2019-05-06 18:48:36
    webpack 中每个模块有一个唯一的 id,是从 0 开始递增的。 整个打包后的 bundle.js 是一个匿名函数自执行。 参数则为一个数组。数组的每一项都为个 function。 function 的内容则为每个模块的内容,并按照 require ...

    webpack 中每个模块有一个唯一的 id,是从 0 开始递增的。
    整个打包后的 bundle.js 是一个匿名函数自执行。
    参数则为一个数组。数组的每一项都为个 function。
    function 的内容则为每个模块的内容,并按照 require 的顺序排列。

    识别入口文件,识别模块依赖,来打包代码。webpack做的就是分析代码,转换代码,编译代码,输出代码


    Webpack的两个最核心的原理分别是:

    一切皆模块

    正如js文件可以是一个“模块(module)”一样,其他的(如css、image或html)文件也可视作模 块。
    因此,你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。
    这意味着我们可以将事物(业务)分割成更小的易于管理的片段,从而达到重复利用等的目的。

    按需加载

    传统的模块打包工具(module bundlers)最终将所有的模块编译生成一个庞大的bundle.js文件。
    但是在真实的app里边,“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。
    因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件,而且异步加载部分代码以实现按需加载。


    如何实现一个简单的webpack

    • 读取文件分析模块依赖
    • 对模块进行解析执行(深度遍历)
    • 针对不同的模块使用相应的loader
    • 编译模块,生成抽象语法树AST。
    • 循环遍历AST树,拼接输出js。

    loader原理

    在解析对于文件,会自动去调用响应的loader,
    loader 本质上是一个函数,输入参数是一个字符串,输出参数也是一个字符串。
    当然,输出的参数会被当成是 JS 代码,从而被 esprima 解析成 AST,触发进一步的依赖解析。
    webpack会按照从右到左的顺序执行loader。

    一种正确的思路是:

    使用JS代码解析工具(如esprima或者acorn),
    将JS代码转换成抽象语法树(AST),
    再对AST进行遍历。
    这部分的核心代码是 parse.js。


    webpack优化

    1. externals配置优化 :使用 externals 将第三方库以 cdn 的方式去引入
      设置externals配置项分离不需要打包的库文件,然后在模版文件中使用script引入即可,配置代码片段如下:
    externals: {
      'jquery': 'jquery'
    },
    
    entry: {
        entry: './src/main.js',
        vendor: ['vue', 'vue-router', 'vuex', 'element-ui']
    },
    // 这里的output为base中的output,不是生产的output
    output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        libraryTarget: "umd",
        publicPath: process.env.NODE_ENV === 'production' ?
            config.build.assetsPublicPath : config.dev.assetsPublicPath
    },
    externals: {
        echarts: 'echarts',
        _: 'lodash'
    }
    
    1. CDN: 背景图片会有问题

    url-loader中单独配置cdn,做到js访问线上路径,静态资源使用cdn,两者互不影响

    url-loader不能检测到js中的background,所以我们凡是在js中引用的地址,必须在外面先import这张图片,url-loader才会解析并打包

    1. 打包后的js过大,将js打包多个文件

    由于webpack打包后的js过大,以至于在加载资源时间过长。所以将文件打包成多个js文件,在需要的时候按需加载。 优化方案:

    entry:{ 
     main:'xxx.js'
    } 
    plugins:{
     new commonsChunkPlugin({
     name:'commons',
     minChunks:function(module){
      // 下边return参考的vue-cli配置
      // any required modules inside node_modules are extracted to vendor
      return (
       module.resource &&
       /\.js$/.test(module.resource) &&
       module.resource.indexOf(
       path.join(__dirname, '../node_modules')
       ) === 0
      )
     }
    }) ,
    // 以下才是关键
    new commonsChunkPlugin({
     name:'charts',
     chunks:['commons'] 
     minChunks:function(module){
      return (
       module.resource &&
       /\.js$/.test(module.resource) &&
       module.resource.indexOf(
       path.join(__dirname, '../node_modules')
       ) === 0 && ['jquery.js', 'highcharts.js','echarts'].indexOf( module.resource.substr(module.resource.lastIndexOf('/')+1).toLowerCase() ) != -1
      )
     }
    }) 
    }
    
    1. 使用webpack.optimize.UglifyJsPlugin插件压缩混淆js代码,使用方法如下:
    plugins: [//webpack.config.jsnew webpack.optimize.UglifyJsPlugin({    warnings: false,
       compress: {
           join_vars: true,
           warnings: false,
       },
       toplevel: false,
       ie8: false,
    ]
    

    优化
    1.缩小文件搜索范围,配置比如resolve.modules,resolve.modules,resolve.mainFields,resolve.alias ,resolve.extensions ,module.noParse 配置

    2.使用DllPlugin 要给 Web 项目构建接入动态链接库

    3.HappyPack 就能让 Webpack 做到这点,它把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程

    4.当 Webpack 有多个 JavaScript 文件需要输出和压缩时,原本会使用 UglifyJS 去一个个挨着压缩再输出, 但是 ParallelUglifyPlugin 则会开启多个子进程,把对多个文件的压缩工作分配给多个子进程去完成

    5.可以监听文件的变化,当文件发生变化后可以自动刷新浏览器,从而提高开发效率。

    6.(Hot Module Replacement)的技术可在不刷新整个网页的情况下做到超灵敏的实时预览。 原理是当一个源码发生变化时,只重新编译发生变化的模块,再用新输出的模块替换掉浏览器中对应的老模块。

    7.Tree Shaking 可以用来剔除 JavaScript 中用不上的死代码。它依赖静态的 ES6 模块化语法,例如通过 import 和 export 导入导出

    8.可以使用CommonsChunkPlugin 把多个页面公共的代码抽离成单独的文件进行加载

    9.Webpack 内置了强大的分割代码的功能去实现按需加载,可以用import实现路由按需加载。

    10.Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快, 它又译作 “作用域提升”

    11.可以使用可视化分析工具 Webpack Analyse等去分析输出结果,从页进行优化.
    对于 Webpack4,打包项目使用 production 模式,这样会自动开启代码压缩

    12.优化图片,对于小图可以使用 base64 的方式写入文件中
    给打包出来的文件名添加哈希,实现浏览器缓存文件

    展开全文
  • * 默认配置,是按生产环境的要求设置,也就是使用 webpack -p 命令就可以生成正式上线版本。 * 也可以使用 webpack -d -w 命令,生成用于开发调试的代码。 * 通常开发使用 node server.dev.js 命令 , server.dev....
  • 1、下载nrm(为了更改下载的源) (1)npm i nrm -g 全局安装nrm 包 ...(1)npm i webpack -g 全局安装webpack (2)npm i webpack --save-dev 安装到项目的根目录下(大多数情况下需要这一步) 3、使用npm init -y初始...
  • 单元测试 我们在Part1里已经说过,但与那测试就是测试单元的代码,不管这些单元是函数、模块还是类。多数人认为测试应该以单测为主,但我不这么认为,如果你同意也没有问题。我会一遍一遍又一遍地在这一系列文章中...
  • Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack。 ...当我第一次看到Webpack的...经过一段时间的尝试之后我认为这是因为Webpack只是使用了比
  • webpack 常用配置

    2019-12-09 15:52:53
    一、前言 webpack是目前前端开发中最流行的打包工具,不仅能实现 JS 打包,还能...使用时需要安装 webpackwebpack-cli 、webpack-dev-server三个基础模块。 二、常用 webpack 配置如下 module.exports = { ...
  • 什么是 webpackwebpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。 我们可以直接使用 require(XXX) 的形式来...
  • webpack

    2020-05-26 13:35:42
    webpack基本使用 webpack官方有两种用法: 终端使用(需要全局安装webpack) Node.js的配置文件(可以全局安装也可以在项目中安装) 以下是终端使用的方式, 学习阶段可以尝试一下: 全局安装webpack(不推荐) npm i ...
  • webpack和gulp的区别

    2019-08-07 11:08:36
    webpack和gulp的区别是什么? 这是一个前端面试经常会有的面试题,当然也是很多人的疑问,那下面就简单说一下吧! Gulp: gulp 致力于 自动化和优化 你的工作流,它是一个自动化你开发工作中 痛苦又耗时任务 的工具...
  • 更好的维护代码,把 webpack.config.js 拆分成三个部分: 公 共 配 置 : 把 开 发 和 生 产 环 境 需 要 的 配 置 都 集 中 到 公 共 配 置 文 件 中 , 即 webpack.common.js 开发环境配置:把开发环境需要的相关...
  • webpack4.x开发环境配置

    2019-10-13 14:00:46
    写这篇文章的初衷在于,虽然网络上关于webpack的教程不少,但是大多已经过时,由于webpack版本更新后许多操作变化很大,很多教程的经验已经不适合。当我们使用npm安装webpack时,若不指定webpack的版本,将默认安装...
  • 由此而来的还有之前webpack3.x的项目如何迁移到新的webpack版本,本文就一个新的vue-cli创建的基于webpack的项目进行迁移。 题外话:不要看0配置是很有噱头,基本是不能满足大部分用户啊的需求,不过加...
  • 一、问题描述在安装webpack时,输入webpack -v提示我需要安装webpack-cli,如图:二、解决因为在webpack 3中,webpack本身和它的CLI以前都是在同一个包中,但在第4版中,他们已经将两者分开来更好地管理它们。...
  • 背景:最近收到很多童鞋的问题:gulp和webpack 什么关系,是一种东西吗?可以只用gulp,不用webpack吗 或者反过来? 基于此问:我简单归结了一下区别和概念,让需要的同学阅读理解,从而不把时间浪费到这种模糊不清...
  • Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例。必须要配置...
1 2 3 4 5 ... 20
收藏数 123,436
精华内容 49,374
关键字:

webpack