精华内容
参与话题
问答
  • webpack 常用配置

    千次阅读 2019-05-06 09:06:25
    一、前言 webpack是目前前端开发中最流行的打包工具,不仅能实现 JS 打包,还能将 CSS 文件,图片文件,甚至是 LESS 文件打包,每一个文件都是一个独立的模块...二、常用 webpack 配置如下 module.exports = { ...

    一、前言

    webpack是目前前端开发中最流行的打包工具,不仅能实现 JS 打包,还能将 CSS 文件,图片文件,甚至是 LESS 文件打包,每一个文件都是一个独立的模块,并且实现按需加载。使用时需要安装 webpack 、 webpack-cli 、webpack-dev-server三个基础模块。

    二、常用 webpack 配置如下

    module.exports = {
            entry: './src/index.js',
            output:{
                filename:'bundle.js',
                path:path.resolve(__dirname,'dist')
            },
            module:{
                rules:[
                      {
                        test: /\.js$/,
                        loader: 'babel-loader?cacheDirectory=true',
                        include: [
                          resolve('src'),
                        ],
                        exclude:path.resolve(__dirname, 'node_modules')
                     },
                    {
                        test:/\.css$/,
                        use:[
                            'style-loader',
                            'css-loader',
                            'postcss-loader'
    
                        ]
                    },{
                        test:/\.(png|svg|jpg|gif)$/,
                        loader: 'url-loader',
                        options: {
                          limit: 10000,
                          name: utils.assetsPath('img/[name].[hash:7].[ext]')
                        }
                    }
                ]
            }
        }

    三、配置参数说明

    mode:两种 mode 模式可供选择,一种是开发环境,命令为 webpack --mode = development,打包出来的文件未经过压缩;一种是生产环境,命令是 webpack --mode = production ,打包出来的文件是经过压缩的。

    entry:资源入口文件,所有的资源最后会打包成一个 JS 文件。

    ouput:打包之后存放的文件路径。path 为相对路径,filename 为打包后的文件名。

    module:rules 配置编译规则,test 正则匹配,exclude 排除特定条件,use-loader,test 匹配到的解析器模块,use-options,与use-loader配合使用。

    plugins:插件。plugins 与 loader 的区别在于,loader 只是一个解析模块,比如将 ES5 解析成 ES6,LESS 文件解析成 CSS 文件,为了兼容浏览器。而 plugins 是将 loader 之后的文件进行优化分类、压缩、提供公共代码等。

    devServer:服务器配置,contentBase 文件路径,compress 是否启动 gzip 压缩,host 主机地址,port 端口号,publicPath。

    四、常用 plugins

    1. extract-text-webpack-plugin 与 mini-css-extract-plugin

    分离 .css 分解,后者需要 webpack 4.2.0 版本以上。

    2. UglifyJsPlugin

    压缩 js 文件,减小 js 文件。

    3. html-webpack-plugin 与 html-loader

    生成 html 文件。

    4. clean-webpack-plugin

    每次构建之前清理历史打包文件。

     

    展开全文
  • 三.webpack基本配置

    2017-10-23 09:39:15
    webpack基本配置 1.关于webpack.config.js 首先我们先建立这样的目录 文件说明: src : 放置源文件的目录 dist : 放置打包后文件的目录 index.html : 初始化页面(要手动引用生成的js文件...

    webpack基本配置

    1.关于webpack.config.js

    首先我们先建立这样的目录

    这里写图片描述

    文件说明:
    src : 放置源文件的目录
    dist : 放置打包后文件的目录
    index.html : 初始化页面(要手动引用生成的js文件)
    entry.js : 入口js文件
    entry2.js : 入口js文件
    webpack.config.js : webapck的配置文件

    1.1 webpack.config.js的说明

    webapck的配置文件, (具体的配置在文档 API—>configuration )为何建立webpack.config.js ,是因为在命令行中执行webpack会默认寻找目录下的webpack.config.js,以webpack.config.js的配置去运行
    当然也可以webpack --config hcd.js 执行hcd.js中的配置

    webpack.config.js的基本结构

    module.exports={
    		//当前环境设置
    		mode: 'production',
    	    //入口文件的配置项
    	    entry:{},
    	    //出口文件的配置项
    	    output:{},
    	    //模块:例如解读CSS,图片如何转换,压缩
    	    module:{},
    	    //插件,用于生产模版和各项功能
    	    plugins:[],
    	    //配置webpack开发服务功能
    	    devServer:{}
    }
    
    1. mode: webpack4新增的特性,会默认启用对当前环境设置的默认插件,方便开发或者有利于打包输出。
    2. entry:配置入口文件的地址,可以是单一入口,也可以是多入口。
    3. output:配置出口文件的地址,在webpack2.X版本后,支持多出口配置。
    4. module:配置模块,主要是解析CSS和图片转换压缩等功能。
    5. plugins:配置插件,根据你的需要配置不同功能的插件。
    6. devServer:配置开发服务功能。

    入口配置和出口配置:

    //模块化输出
    	module.exports = {
    		mode: 'development',
    		//入口文件,一般使用绝对路径,__dirname为webpack.config.js所在的文件夹
    		entry:__dirname+'/src/entry.js',
    		// 打包后的文件
    		output:{
    			//打包后文件在./dist/js的文件夹中
    			path:__dirname+'/dist/js',
    			//打包后文件的名称
    			filename:'bundle.js'
    		}
    	}
    

    再在命令行中执行 webpack 命令:
    这里写图片描述
    结果目录为:
    这里写图片描述
    我们可以看到已经自动打包生成了dist文件夹和bundle.js

    2. mode 模式

    mode配置选项将告诉webpack相应地使用其内置优化。

    mode在配置中提供选项:

    module.exports = {
      mode: 'development'
    };
    

    在命令行中或者package.json中

    webpack --mode=development
    
    选项 描述
    development 设置 process.env.NODE_ENV 于 DefinePlugin 价值 development 。启用 NamedChunksPlugin 和 NamedModulesPlugin 。
    production 设置 process.env.NODE_ENV 于 DefinePlugin 价值 production 。启用 FlagDependencyUsagePlugin , FlagIncludedChunksPlugin , ModuleConcatenationPlugin , NoEmitOnErrorsPlugin , OccurrenceOrderPlugin , SideEffectsFlagPlugin 和 TerserPlugin 。
    none 选择退出任何默认优化选项

    如果未设置,则webpack设置production为的默认值mode

    请记住,设置NODE_ENV不会自动设置mode。需要自己设置

    如果要根据webpack.config.js中的mode变量更改行为,则必须导出函数而不是对象:

    var config = {
      entry: './app.js'
      //...
    };
    
    module.exports = (env, argv) => {
    
      if (argv.mode === 'development') {
        config.devtool = 'source-map';
      }
    
      if (argv.mode === 'production') {
        //...
      }
    
      return config;
    };
    

    3.entry入口文件

    在上面的例子中,我们已经知道,entry是入口文件的意思,webpack关于入口文件有3种方式
    API:http://webpack.github.io/docs/configuration.html#entry

    1.引入单个文件

    	entry: "./src/js/main.js",
    

    2.引入数组

    	entry:['./src/js/main.js','./src/js/hello.js']
    

    这里写图片描述
    可以看到一共打包了【0】【1】【2】3个模块,【0】是multi,【1】,【2】才是我们想要打包的内容,这是为何呢,我们来看一下打包后的文件bundle.js
    这里写图片描述
    可以看到其实【0】模块是用来引用我们的【1】【2】模块的,将【1】【2】打包到一起去,这样我们就可以使用了

    3.entry对象

    这种传递entry对象的方式多应用于多页面, chunk:path(模块:路径)
    page1页面使用”./page1“打包后的文件,page2页面使用的是["./entry1", “./entry2”]打包后的文件

    entry: {
            page1: "./page1",
            page2: ["./entry1", "./entry2"]
        },
    

    但是如果不更改output将会导致两个文件打包后输出的文件名字一样,造成了重复覆盖,所以要更改output

    4.output

    API:http://webpack.github.io/docs/configuration.html#output
    影响编译输出的选项。output选项告诉Webpack如何将编译的文件写入磁盘。请注意,虽然可以有多个entry点,但output只指定一个配置。

    1.output.filename

    指定磁盘上每个输出文件的名称。你不能在这里指定绝对路径!该output.path选项确定磁盘上写入文件的位置。filename仅用于命名单个文件。
    单个入口文件:

    {
      mode: 'development',
      entry: './src/app.js',
      output: {
        filename: 'bundle.js',
        path: __dirname + '/build'
      }
    }
    

    2.多个引入文件:

    如果您的配置创建多个单个“块”(如多个入口点或使用像CommonsChunkPlugin这样的插件),则应使用替换来确保每个文件具有唯一的名称。
    [name] 被块的名称所取代。(就是entry对象的chunk)
    [hash] 被编译的哈希替换。(在编译的时候可以看到)
    [chunkhash] 被块的哈希替代。(块的哈希值如同MD5一样,只要代码不一样,哈希就不同)

    {
      mode: 'development',
      entry: {
        app: './src/app.js',
        search: './src/search.js'
      },
      output: {
        filename: '[name].js',
        path: __dirname + '/build'
      }
    }
    

    例如:

    //模块化输出
    module.exports = {
    	mode: 'development',
    //入口文件,这里采用entry对象的方式,分别将main.js和hellow.js打包
    	entry:{
    		main:'./src/script/main.js',
    		hello:'./src/script/hellow.js'
    	},
    	// 打包后的文件
    	output:{
    		//打包后文件在./dist/js的文件夹中
    		path:__dirname+'/dist/js',
    		//打包后文件的名称为entry的chunk名称-编译的哈希值
    		filename:'[name]-[hash].js'
    	}
    }
    

    编译过程:
    这里写图片描述
    可以看到打包成了两个文件 (因为编译的哈希一样所以后面的是一样的)
    这里写图片描述
    当然可以采用【name】-【chunkhash】这样产生的文件名就完全不一样了,【chunkhash】就如同是MD5一样,是完全不同的,哪怕是同一个js只要代码发生变化【chunkhash】就会不同,这是非常有用的,我们一般只上线我们更改的js文件。

    2. output.path

    输出目录为绝对路径(必需)。

    5.服务和热更新

    现在一般有点规模的公司都为前端工程师准备了双屏显示器,其目的就是一个屏幕编写代码,一个屏幕实时显示页面效果。下面我们用webpack3.6版本实现热更新效果。

    设置webpack-dev-server
    首先利用npm 下载(现在的webpack的高版本中已经自带,可以不用下载,你可以先不下载,先试一下有没有

     npm install webpack-dev-server --save-dev
    

    下载好后,需要配置一下devServer。最简单的devServer配置项只有 4项
    wepack.config.js :

    var path = require('path');
    module.exports = {
    	mode: 'development',
        //入口文件的配置项
        entry: {
            //entry和addNew为打包后文件的名称
            entry: __dirname + '/src/entry.js',
            //这里我们又引入了一个入口文件
            addNew: __dirname + '/src/entry2.js'
        },
        //出口文件的配置项
        output: {
            //输出的路径
            path: __dirname + "/dist",
             //输出的文件名称
            filename: '[name].js' 
        },
       devServer:{
            //设置基本目录结构
             .join(__dirname, 'dist'),,
            //服务器的IP地址,可以使用IP也可以使用localhost
            host:'localhost',
            //服务端压缩是否开启
            compress:true,
            //配置服务端口号
            port:1717
        }
    }
    
    
    1. contentBase:配置服务器基本运行路径,用于找到程序打包地址。
    2. host:服务运行地址,建议使用本机IP,这里为了讲解方便,所以用localhost。
    3. compress:服务器端压缩选型,一般设置为开启,如果你对服务器压缩感兴趣,可以自行学习。
    4. port:服务运行端口,建议不使用80,很容易被占用,这里使用了1717

    接着我们执行命令:

    	 webpack-dev-server
    

    结果:
    这里写图片描述
    我们看到文件已经打包完成了,但是在dist目录里并没有看到文件,这是因为WDS是把编译好的文件放在缓存中,没有磁盘上的IO,但是我们是可以访问到的

    http://localhost:1717/【打包后的文件名】
    

    配置告知 webpack-dev-server,在 localhost:1717下建立服务,将 dist 目录下的文件,作为可访问文件,所以我们可以直接输入打包后的文件名的地址查看

    如果找不到文件可以通过http://localhost:1717/webpack-dev-server查找

    问题:
    配置好后,你可以试着在终端中输入webpack-dev-server,如果可以执行成功,但是往往提示错误(或者是无法找到内部或外部命令)。我们可以在json中配置解决问题

    6.json的配置

    首先目录和前面是一样的,webapck.config.js的配置也是一样的。
    只不过可以通过在package.jsond的script中设置便捷的执行命令的方式。

    	{
    	  "name": "webpack-hcd",
    	  "version": "1.0.0",
    	  "description": "",
    	  "main": "index.js",
    	  "scripts": {
    	    	"test": "echo \"Error: no test specified\" && exit 1",
    		   	"webpack":"webpack --config webpack.config.js --mode=development --progress --display-modules --colors",
    		   	"server": "webpack-dev-server --open"
    	  },
    	  "author": "",
    	  "license": "ISC",
    	  "devDependencies": {
    	    "webpack": "^3.6.0"
    	  }
    	}
    

    解释:
    "webpack":"webpack --config webpack.config.js --progress --display-modules --colors"
    webpack --config webpack.config.js : 执行webpack.config.js
    –progress : 查看过程
    –display-modules : 打包了哪些模块
    –colors : 彩色的
    –open : 自己打开页面
    执行命令行:

     npm run webpack
    

    这里写图片描述

    执行热更新命令

    npm run server
    

    6.webpack-dev-server搭配HotModuleReplacementPlugin 实现热更新

    webpack-dev-server的更新是需要刷新整个页面的,有时我们需要局部刷新,这就有了模块热替换
    特性:
    模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。主要是通过以下几种方式,来显著加快开发速度:

    • 保留在完全重新加载页面时丢失的应用程序状态。
    • 只更新变更内容,以节省宝贵的开发时间。
    • 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。

    启用

    启用HMR,其实十分简单,修改下webpack-dev-server的配置,和使用webpack内置的HMR插件即可。

    var path = require('path');
    // 新增
    var webpack = require('webpack');
    module.exports = {
        entry: {
            entry: __dirname + '/src/entry.js',
        },
        output: {
            path: __dirname + "/dist",
            filename: '[name].js' 
        },
       devServer:{
            contentBase:path.join(__dirname, 'dist'),
            host:'localhost',
            compress:true,
            port:1717,
            // 新增
            hot: true
        },
        // 新增
        plugins: [
    	   new webpack.HotModuleReplacementPlugin()
    	]
    }
    
    

    entry.js

    import { test } from './hcd.js'
    let a = 1;
    console.log(a);
    test()
    

    hcd.js

    module.exports = {
      test: function () {
        console.log(11121231212312333456)
      }
    }
    

    启动

     npm run server
    

    访问:

    http://localhost:1717/bundle
    
    展开全文
  • webpack --config webpack.config.js --mode production", "dev": "webpack-dev-server --config webpack.config.js" } var webpack = require('webpack'); var path = require('path'); var glob = require(...
    "scripts": {
      "build":"rimraf dist && webpack --config webpack.config.js --mode production",
      "dev": "webpack-dev-server --config webpack.config.js"
    }
    
    var webpack = require('webpack');
    var path = require('path');
    var glob = require("glob");
    
    var DIST_PATH = path.resolve(__dirname, './dist');
    
    //入口文件
    var SRC_PATH = path.resolve(__dirname, './src');
    var newEntries = {};
    
    // var files = glob.sync(path.join(SRC_PATH,'/*.js')); // 方式一
    var files = glob.sync(SRC_PATH + '/*.js'); //方式二
    files.forEach(function (file, index) {
      // var substr =  file.split('/').pop().split('.')[0];
      var substr = file.match(/src\/(\S*)\.js/)[1];
      newEntries[substr] = file;
      // [\s]---表示,只要出现空白就匹配;
      // [\S]---表示,非空白就匹配;
    })
    
    // 声明/dist的路径 为成绝对路径
    module.exports = {
      // 入口JS路径 的多种处理方式
      // 指示Webpack应该使用哪个模块,来作为构建其内部依赖图的开始 
      // entry: path.resolve(__dirname,'./src/index.js'), 
      // 支持单文件,多文件打包
      // entry: './src/index.js',   //方式一
      // entry: ['./src/index.js','./src/main.js'], //方法二
      // entry: {
      //     index:'./src/index.js',
      //     main:'./src/main.js'
      //  },
      entry: newEntries,
      // 编译输出的JS入路径 
      // 告诉Webpack在哪里输出它所创建的bundle,以及如何命名这些文件 
      output: {
        path: DIST_PATH, // 创建的bundle生成到哪里
        filename: '[name].[chunkhash:8].js', // 创建的bundle的名称
      },
      // 模块解析 
      module: {},
      // 插件
      plugins: [],
      // 开发服务器 
      devServer: {
      	headers :{},//在所有响应中添加首部内容
      	https:true  //默认情况下,dev-server 通过 HTTP 提供服务。也可以选择	带有 HTTPS 的 HTTP/2 提供服务
    	Info: true //是否要输出一些打包信息
        clientLogLevel:"none",//日志层级
        hot: true, // 热更新,无需手动刷新 
        contentBase: DIST_PATH, //热启动文件所指向的文件路径
        compress:true, //是否启用gzip压缩
        host: '0.0.0.0', // host地址 
        port: 8080, // 服务器端口 
        historyApiFallback: true, // 该选项的作用所用404都连接到index.html 
        // 代理到后端的服务地址,会拦截所有以api开头的请求地址
        proxy: {
          "/api": "http://localhost:3000",
          //pathRewrite: {"^/api" : ""}  //路径重写
        },
        useLocalIp: true,//用本地ip
        open: true,//自动打开浏览器
        noInfo: true//noInfo启用 noInfo 后,诸如「启动时和每次保存之后,那些显示的 webpack 包(bundle)信息」的消息将被隐藏。错误和警告仍然会显示。
        //启动后除了启动信息都不会显示
        progress :true,将运行进度输出到控制台
    	publicPath : "",//此路径下的打包文件可在浏览器中访问,默认 
    	watchContentBase:true  //告诉服务器监视devserver.contentbase选项提供的文件。文件更改将触发整页重新加载
    
        /*
        * quit:true,
        * */
        //可以接受一个app对象(express)处理一些请求
        // setup(app){
        //     app.get('/some/path', function(req, res) {
        //         res.json({ custom: 'response' });
        //     });
        // },
      }
    }
    
    
    展开全文
  • webpack超详细配置, 使用教程(图文)

    万次阅读 多人点赞 2017-05-06 19:22:14
    博主在这里就不详细介绍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初始化配置 (史上最详细版本)

    千次阅读 2018-11-18 22:00:18
    webpack官网: https://www.webpackjs.com/ 注意:因为webpack一些插件总是不断更新,所以在以后的...webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具,借助于webpack这个前端自动化构建...
  • webpack配置 webpack的babel-loader的配置 文件夹的解释 dist用来放入打包后的文件(生产时) src这是我们开发时的文件(css和less主要是这里用来测试的) index.html(我们的页面,放一个容器来让其他...
  • webpack的基本配置

    2020-11-09 18:11:43
    由于改变代码但是没有重新打包,如果重新更改代码,希望看到一个热更新的效果,所以有了webpack的devServe来自动打包,需要我们在webpack.config.js中去配置 devServer:{ // 项目构建后的路径 contentBase:...
  • webpack超详细配置

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

    2020-11-22 13:32:34
    * 开发环境的配置: 能让代码运行即可 * 整体流程: 源代码 --> webpack(+自动化) --> bundle(输出文件) */ const { resolve } = require('path'); const HtmlWebpackPlugin = require('...
  • webpack系统配置

    千次阅读 2018-07-22 22:00:23
    简言之,webpack 是一个模块打包器 (module bundler),能够将任何资源如 JavaScript 文件、CSS 文件、图片等打包成一个或少数文件。 为什么要用Webpack? 首先,定义已经说明了 webpack 能将多个资源模块打包成一个...
  • webpack入门和实战(一)--webpack配置及技巧

    万次阅读 多人点赞 2018-09-18 00:33:35
    一、全面理解webpack 1、什么是 webpack?  webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理,它能有Grunt或Gulp...
  •   Webpack凭借强大的功能,成为最流行和最活跃的打包工具,也是面试时高级程序员必须掌握的“软技能”;笔者结合在项目中的使用经验,介绍webpack的使用;本文是入门篇,主要介绍we...
  • 开发环境配置:把开发环境需要的相关配置放置到 webpack.dev.js 生产环境配置:把生产环境需要的相关配置放置到 webpack.prod.js 安装yarn add webpack-merge --dev 或者 npm i webpack-merge -D 生产文
  • 2、配置文件 package.json 功能:在 package.json 中,可以找到开发和生产环境的入口 &quot;scripts&quot;: { &quot;dev&quot;: &quot;node build/dev-server.js&quot;, // 开发...
  • vue-cli3搭建完整项目之webpack配置

    万次阅读 2019-03-10 12:11:39
    vue-cli3搭建完整项目之webpack配置 由于vue-cli3将webpack的基础配置全部内嵌了,这就导致我们初始化项目完成之后发现原先的webpack的config配置全部都消失不见了,那该怎么办呢?别慌,vue-cli3早就考虑到了这一点...
  • vue2.0脚手架的webpack 配置文件分析

    千次阅读 2017-02-08 10:47:10
    作为 Vue 的使用者我们对于 vue-cli 都很熟悉,但是对它的 webpack 配置我们可能关注甚少,今天我们为大家带来 vue-cli#2.0 的 webpack 配置分析 vue-cli 的简介、安装我们不在这里赘述,对它还不熟悉的同学可以...
  • webpack配置多页面项目

    万次阅读 2018-02-04 23:21:58
    我自己最常用的是vue,平时就是使用vue-cli或者nuxt构建的项目,聪明的前辈已经为我们配好了项目,可以让我们不必去配置就可以轻松使用。 然而在真正的项目中,我们常常需要写一些简单的页面,并不基于vue这样比较大...
  • vue笔记 webpack配置参数详解

    万次阅读 2019-06-17 16:07:23
    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') module.exports = { build: { index: path.resolve(__...
  • Webpack配置编译SCSS

    千次阅读 2019-03-08 22:53:04
    原文地址: ...有时只是需要编译scss文件,在使用gulp的方式时遇到了无法识别SCSS的~语法的问题,其实也可以通过一些配置来解决,只是觉得既然webpack是主流,那不妨总结一套专门编译scss的配置 webpack.c...
  • webpack配置文件解析

    千次阅读 2017-01-12 10:39:47
    webpack配置文件解析dev-server.js文件Node.js代理服务器的中间件(可以代理和转发一些我们需要的API) var proxyMiddleware = require('http-proxy-middleware') var port = process.env.PORT || config.dev.port//...
  • ES6模块化及webpack配置

    千次阅读 2017-11-13 22:00:27
    安装 node & npm(因为webpack是基于node开发的) 通过 npm / yarn 的方式来安装 webpack 安装方式: 全局安装 npm install -g webpack -g : global 全局 会装在npm默认目录 好处:只需要安装一次,本机中任何...
  • 从网上搜到了一个国外的大神写的blog,跟着一步一步配置,受益颇多。我按照自己的理解,做了简单的整理。 将多个HTML文件,整合为一个HTML文件,并压缩优化图片将Sass编译为CSS并压缩结合Babel编译JS文件,并压
  • vue-cli3之webpack配置

    千次阅读 2020-03-08 21:27:17
    当我们项目初始化后,没有了以前熟悉的 build 目录,也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件,可能一时会觉得无从下手,其实是vue-cli3在我们项目初始化的...
  • 1.安装之前步骤新建好项目文件,新增加dist 文件夹用来...2.新建一个webpack.config.js文件用来写webpack配置文件。 配置代码: //webpack 1.0 语法 /*module.exports = { entry:'./src/script/main.js', ou...
  • webpack配置vue

    2018-02-03 19:15:16
    2、下载css与style的loader配置webpack中的css解析 npm install css-loader style-loader --save-dev3、下载babel,webpack配置es6语法 npm install babel-core babel-loader babel-plugin-transfo
  • vue-cli3 的webpack配置

    万次阅读 2018-11-23 14:15:26
    @vue/cli的webpack配置 查看默认配置 因为Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的, 把一些常用的内容配置好. vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。 vue inspect &...
  • webpack-merge合并webpack配置文件

    千次阅读 2020-01-10 13:51:42
    1、webpack.config.base.js开发环境和生产环境的共同配置 let path = require('path'); let HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = requir...
  • vue-cli的webpack模板项目配置文件分析

    万次阅读 多人点赞 2017-02-14 23:07:25
    由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会“太折腾...
  • 在build文件夹下配置webpack.dev.config.js文件和webpack.prod.config.js文件 在两个文件中的plagins数组对象中,添加一个jquery配置项 new webpack.ProvidePlugin({ $: 'jquery' }) 如下图位置 ...
  • webpack配置方法更新

    2019-05-21 15:56:43
    新建一个webpack文件夹,例如webpack-demo,并用vscode打开这个文件夹,使用命令创建一个package.json文件: $ npm init -y 在webpackdemo下建一个src文件夹,在./src下新建main.js和index.html两个文件(在这两个...

空空如也

1 2 3 4 5 ... 20
收藏数 174,864
精华内容 69,945
关键字:

webpack配置