基础配置总结

  1. webpack hello.js hello.bundle.js打包命令参数

    1. --config filename : 指定其他名称做配置文件
    2. --watch / -w : 监听文件改动,自动编译(速度快)
    3. -d : 开启(生成)source maps (用来调试)
    4. -p : 生产环境下编译(压缩)
    5. --progress : Print compilation progress in percentage
    6. --display-modules : Display even excluded modules in the output
    7. --display-reasons : Display reasons about module inclusion in the output
    8. 可组合使用:webpack -wdp

  1. entry 入口文件三种方式:

    入口文件:用来引入html文件所需要的资源

    1. entry: './src/app.js' :单文件入口
    2. entry: ["./entry1", "./entry2"] : 多个不相关文件入口,打包到一起
    3. 多个模块文件入口
      entry: {
      page1: "./page1",
      page2: ["./entry1", "./entry2"]
      }
  2. output 出口文件三个占位符

    {
    entry: {
    app: './src/app.js',
    search: './src/search.js'
    },
    output: {
    filename: '[name].js',
    path: __dirname + '/build'
    }
    }
    1. [name] 以模块名字代替,即入口文件定义的key
    2. [hash] 本次打包编译的哈西值
    3. [chunkhash] 相应模块的哈西值,根据md5产生,再次打包只有改变的模块的哈西值会变

  1. loaders三种使用方式

    * webpack默认只支持javascript文件

    *需要用加载器(loader)

    *loader类似一种转化器, 它可以把一个东西,转成另一个

    1. 在引入文件时 require:

      style-loader!css-loader!./style.css

      从右向左执行,不可颠倒顺序,不要丢掉最后一个!
    2. 通过CLI配置(在命令行中):

      webpack --module-bind jade --module-bind 'css=style!css'

      通过参数--module-bind绑定
    3. 通过配置文件配置:
      {
      module: {
      loaders: [
      { test: /\.jade$/, loader: "jade" },
      // => "jade" loader is used for ".jade" files { test: /\.css$/, loader: "style!css" },
      // => "style" and "css" loader is used for ".css" files
      // Alternative syntax:替代语法
      { test: /\.css$/, loaders: ["style", "css"] },
      ]
      }
      }
  2. loader传递查询参数的两种方式:

    1.在loader后面跟?再跟一个参数,类似get请求 2.在配置文件中用query属性加参数

    1. CLI (在命令行中)

      webpack --module-bind "png=url-loader?mimetype=image/png"

    2. 在 require 中:

      require("url-loader?mimetype=image/png!./file.png");

    3. 在配置文件中(有两种方式):

      1. ?

        { test: /\.png$/, loader: "url-loader?mimetype=image/png" }
      2. 通过 query
        {
        test: /\.png$/,
        loader: "url-loader",
        query: { mimetype: "image/png" }
        }

  1. webpack-dev-server 三种配置方法

    1. 在命令行启动 : webpack-dev-server

      常用参数:
      1. webpack-dev-server --port 8088 端口号
      2. webpack-dev-server --inline 改变完代码以后,自动刷新浏览器
      3. webpack-dev-server --hot 热重载(局部更改)

        webpack-dev-server --port 8088 --inline --hot
    2. 把参数写到webpack.config.js配置文件中:
      output:{
      ...
      },
      devServer: {
      port: 8088,
      inline: true
      }
    3. 把运行命令放到package.json文件:
      {
      "name": "test",
      "version": "1.0.0",
      "description": "",
      "main": "index.js", "scripts": {
      "dev": "webpack-dev-server --inline --hot --port 8088"
      }, "author": "",
      "license": "ISC",
      "devDependencies": {
      ...
      }
      } 终端运行: npm run dev

常见报错:listen EACCES 127.0.0.1:8080 此端口号已经被监听过了(端口号被占用)


webpack.config.js

  1. 基础

var webpack=require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
entry:{
admin:'./entry.js'
},
output:{
path:__dirname + '/bundle',
filename:'bundle.js'
},
devtool:'source-map',
module:{
loaders:[
{test:/\.css$/,loader:['style-loader','css-loader']}
]
},
resolve:{
extensions:['.js','.css','.jsx'] //自动补全识别后缀
},
plugins:[
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html" //根据此模版生成HTML文件
}),
new webpack.HotModuleReplacementPlugin()
],
devServer:{ //打包的文件临时生成在内存中
contentBase:"./",
historyApiFallback:true,
inline:true,
hot:true
}
};
  1. 较完整

var webpack=require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path=require('path'); module.exports= {
// context:__dirname, //上下文环境 entry:{ //入口文件:用来引入html文件所需要的资源
main:'./src/script/main.js'
// a:'./src/script/a.js',
// b:'./src/script/b.js'
},
devtool:'source-map', //直接生成source-map 等于 webpack -d
output:{
path:__dirname + '/dist',
filename:'js/[name]-[chunkhash].js'
// ,publicPath:'http://cdn.com' //上线后地址,配置此参数后会把所有引用的地址替换为该参数值开头
}, devServer:{
port:8088,
inline:true,
hot:true
}, module: {
noParse:[/jquery/], //不要分析与RegExp或RegExps数组匹配的文件。
loaders:[
{
test:/\.js/, //匹配规则
loader:'babel-loader', //
// exclude: path.resolve(__dirname,'node_modules'), //使用绝对路径字符串或者使用正则
exclude: /node_modules/, //排除 , 使用正则
// exclude: __dirname+'/node_modules', //排除
include:/(src|script)/, //仅包含 query:{ //给此loader指定查询参数
presets:['latest'] //给babel-loader指定处理js特性插件
}
},
{
test:/\.css$/,
// loader:'style-loader!css-loader',
loaders:['style','css'] //loaders写法 '-loader'默认可以用省略
}
]
// rules: [{
//
// test: /\.css/,
// use: [
// {loader:'style-loader'},
// {loader:'css-loader'},
// {
// loader: 'postcss-loader',
// options: {plugins: function () {return [require('autoprefixer')];}}
// }
// ]
// }]
},
plugins:[
new HtmlWebpackPlugin({
filename:'index.html', //生成的主文件名称
template:"index.html", //根据此模版文件生成
inject:'body', //引入js文件的位置
title:'webpack is good', //自定义一个属性可以在index.html中访问使用
date:new Date(), //自定义一个属性可以在index.html中访问使用
minify:{ //压缩
removeComments:true //删除注释
//,collapseW hitespace:true //删除空格和换行
}
}),
// new HtmlWebpackPlugin({ //多次配置此插件可以分别生成多个页面文件
// filename:'a.html',
// template:"index.html",
// inject:'false',
// title:"this is a.html",
// chunks:['main','a'] //需要引入的js模块
// }),
// new HtmlWebpackPlugin({
// filename:'b.html',
// template:"index.html",
// inject:'false',
// title:"this is b.html",
// excludeChunks:['main','a'] //要排除引入的js模块,其余都会引入
// })
// ,
// new webpack.LoaderOptionsPlugin({
// options:{ postcss: [ require("autoprefixer")( {browsers: ["last 5 versions"]} ) ] }
// })
],
};

应用例子:

  1. 定制开发环境和产品环境:

    开发环境快速打包,产品环境压缩打包:

    webpack.config.js :

    var webpack=require('webpack');
    var args = require('node-args'); //可读取命令运行时所传入的参数
    var config={
    entry:['./index.html'],
    output:{
    path:__dirname+'/dist',
    filename:'[name].bundle.js',
    publicPath:'/dist/'
    },
    plugins:[],
    module:{
    loaders:[{
    test:/\.js/,
    loader:'bebel',
    include:__dirname,
    exclude:/node_module/
    }]
    }
    }; ******
    if(args.minify){
    congif.plugins=[
    new webpack.optimize.UglifyJsPlugin({
    compress:{
    warnings:false //禁止出现警告
    }
    }),
    new webpack.optimize.OccurenceOrderPlugin(); //优化所有模块的id,使文件更小
    ];
    }
    ******
    module.exports = config;

    package.json :

    "scripts": {
    "start": "webpack-dev-server --progress --colors --hot --inline --watch"
    "builde":"webpack --progress --colors --minify"
    }
    开发环境执行:webpack
    生产环境执行:npm run builde
  2. loaders

    1. css自动添加兼容前缀:
      var HtmlWebpackPlugin = require('html-webpack-plugin');
        rules: [{
      test: /\.css/,
      use: [
      {loader:'style-loader'},
      {loader:'css-loader'},
      {
      loader: 'postcss-loader',
      options: {plugins: function () {return [require('autoprefixer')];}}
      }
      ]
      }]

webpack学习笔记啊(幕课)的更多相关文章

  1. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

  2. 更博不能忘——webpack学习笔记

    webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...

  3. webpack学习笔记(二)-- 初学者常见问题及解决方法

    这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...

  4. webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  5. Webpack学习笔记九 webpack优化总结

    webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...

  6. Webpack学习笔记一:What is webpack

      #,Loaders干嘛的,webpack can only process JavaScript natively, but loaders are used to transform other ...

  7. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  8. 【webpack学习笔记】a04-建立开发环境

    开发环境就是在开发过程中为了方便配置的环境,生产环境就是开发完成即将上线的情况. 好了,说了句废话,切入正题. 在开发时,打包后的文件压缩成一团,报错调试的时候傻眼了有木有?每次做出修改需要到浏览器查 ...

  9. Webpack 学习笔记总结

    Webpack安装 Linux系统默认已经安装了node&npm,但版本比较低,而且没法升级,可以重新下载Node然后通过软链接替换系统自带的node和npm; ln -s /path_to/ ...

随机推荐

  1. 在Ubuntu终端彻底删除软件

    在Ubuntu终端彻底删除软件 1.删除软件 方法一.如果你知道要删除软件的具体名称,可以使用 sudo apt-get remove --purge 软件名称 sudo apt-get autore ...

  2. Redis缓存项目应用架构设计一

    一些项目整理出的项目中引入缓存的架构设计方案,希望能帮助你更好地管理项目缓存,作者水平有限,如有不足还望指点. 一.基础结构介绍 项目中对外提供方法的是CacheProvider和MQProvider ...

  3. 轻松几句搞定【Javascript中的this指向】问题

    this关键字在JavaScript中扮演了至关重要的角色,每次它的出现都伴随着它的指向问题,这也是很多初学者容易出错的地方. 不过,这篇文章将会带你一次性搞定this指向的问题,望能给大家提供帮助! ...

  4. DevOps之归纳总结

    唠叨话 关于德语关我屁事的知识点,仅提供精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. DevOps归纳总结 <DevOps功能与性能>浏览器(饼干Cookie.会话Sessi ...

  5. Mybatis Sql片段的应用

    在一个查询里,针对各种不同数据库,有时候只是一部分 SQL 是不相同的,为避免相同的部分复制多次,所以将不相同的部分进行适当的隔离,再重用就可以了. 在 MyBatis 里声明两段 <sql d ...

  6. linux安装禅道的步骤

    linux一键安装禅道:1.禅道帮助文档:http://www.zentao.net/book/zentaopmshelp/90.html 2.修改Apache的端口号:/opt/zbox/zbox ...

  7. Lavarel artisan 命令

    [alex@iZ25c5aeyiiZ yiqizou3.0]# php artisan list Laravel Framework version Usage: command [options] ...

  8. VS中Release模式下生成去掉生成pdb文件

    1.右键项目,选择属性 2.选择正确的配置,点击高级 3.调试信息选择 none,点击确定.

  9. windows server git

    我有一个阿里云,windows server,我想把代码放阿里云 我去做git,只需要安装copssh 下载git https://git-for-windows.github.io/ 下载Copss ...

  10. 自学ConcuurentHashMap源码

    自学ConcuurentHashMap源码 参考:https://my.oschina.net/hosee/blog/675884 http://www.cnblogs.com/ITtangtang/ ...