零、入口与输出


//对像语法

entry: {

   aa: __dirname + '/src/aa.js',    //(chunkName :path)

   bb: __dirname + '/src/bb.js'

},

output: {

  filename: '[name]-[hash].js',

  path: __dirname + '/dist'

}

//单入口

entry: './src/aa.js',

output: {
    filename: 'bundle.js',            
    path: __dirname + '/dist'  //绝对路径(__dirname为文件所在目录的绝对路径)
  }

//数组

entry: [ './src/aa.js' , './src/bb.js'],
output: {

  filename: [变量] + '.js',

  path: __dirname + '/dist'

}

一、提取公共代码


plugins:[
  new webpack.optimize.CommonsChunkPlugin({

    name: 'common',
    filename: 'aa.js',      //忽略则以name为输出文件的名字,否则以此为输出文件名字
    chunks: ['aa', 'bb'],
    minChunks: true

   })

]

name 或者 names:创建的chunk的名称,如果是 names 数组,则相当于为数组里的每个chunk 实例化插件;

filename:输出的 chunk的文件名;

chunks:这是一个元素为 chunk.name的数组,插件将会从这些 chunks 里提取 common chunks(若忽略,所有chunk都被选择);

minSize:非必填,common chunk 的文件大小至少有 minSize 才会被创建;

minChunks:至少有minChunks个 chunk 共有的代码 才会被提取(Infinity:chunk里引用的模块不会被提取;true:chunk里的所有公共部分都会提取);

(若想将css从common chunk中 提取出单独的css文件:


loaders:[{
   test: /\.css$/,
   use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: 'css-loader'
   })
},...]


plugins:[
new ExtractTextPlugin({
filename: '[name].css',
allChunks: true
}),
]

二、加载器


module: {

   loaders: [ {

     test: /\.js$/, loader: 'babel-loader',    //必须加‘-loader’

     exclude: /node_modules/,

     query: { presets: ['es2015'] }

  },{
    test: /\.css$/,
    loader: 'style-loader!css-loader'

  },{
    test: /\.scss$/,
    loader: 'style-loader!css-loader!sass-loader?sourceMap=true!postcss-loader'  //我们需要在js文件里,通过require的方式来引入css,需要安装css-loader, 
                                                     style-loader(安装style-loader的目的是为了在html中以style的方式嵌入css)。

  }
]

}

三、HTML自动引用 JS/CSS


安装 npm install --save-dev html-webpack-plugin

plugins: [
new HtmlWebpackPlugin({
      filename: 'views/list.html',
      template: 'src/modules/app/list/index.html',
      chunks: ['common', 'List'],
      hash: true}),
]
/**
*filename - 输出文件名,相对路径output.path
* template - HTML模板,相对配置文件目录
* chunks - 只包含指定的文件(打包后输出的JS/CSS),不指定的话,它会包含生成的所有js和css文件
* excludeChunks - 排除指定的文件(打包后输出的JS/CSS),比如:excludeChunks: ['dev-helper']
* hash
**/

 

四、自动添加兼容前缀(使用postcss的autoprefixer插件)


plugins: [
new webpack.LoaderOptionsPlugin({
options: {
postcss: function(){
return [
require("autoprefixer")({
browsers: ['ie>=8','>1% in CN'] , //(['Android >= 2.3','ios>=7'])
                cascade: true, //美化属性值(冒号对齐)
})
]
}
}
})

也可以配置 postcss.config.js  而不写在plugins里:

module.exports = {
plugins: [
require('autoprefixer')({ /* ...options */ })
]
}

  或直接使用autoprefixer-loader:

loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:["last 2 version", "android>=2.3"]}',
//...
}]

 五、自动刷新


安装 npm install --save-dev webpack-dev-server

配置

devServer: {
contentBase: "./public", //本地服务器所加载的页面所在的目录
//colors: true, //终端中输出结果为彩色(新版本已取消该属性)
historyApiFallback: true, //不跳转
inline: true, //实时刷新
port : '8008' //默认8080
}

命令:

webpack-dev-server --inline

六、Source Map


 devtool: 'eval-source-map'        //开发环境

 devtool: 'source-map'                //生产环境

//具体原理待研究

webpack 小记的更多相关文章

  1. webpack使用小记

    前言 webpack是目前前端开发必不可少的一款模块加载器兼构建工具,它能极其方便的处理各种资源的打包和使用, 让前端开发获得与后端开发几乎一致的体验. webpack特点 webpack 是以 co ...

  2. 关于webpack下热更新?&自动刷新?的小记(非vue-cli)

    写本随笔时:webpack4.6.0 为何标题用?号,因为老衲也不知是否用词正确,大概是这样的说法: webpack4.0引入生产模式和开发模式,在开发时使用 webpack 打包后不压缩,所以只需要 ...

  3. 小记:vue 及 react 的工程项目入口小结及 webpack 配置多页面应用参考

    一.前言 闲暇时间,看了下前端的基础知识,有幸参与了公司公众号项目前面的一个阶段,学习到了一些前端框架的相关知识 小结了一下 自己练习通过新建一个个文件组织起项目的过程中的一些理解 二.项目入口 vu ...

  4. 从 Webpack 到 Snowpack, 编译速度提升十倍以上——TRPG Engine迁移小记

    动机 TRPG Engine经过长久以来的迭代,项目已经显得非常臃肿了.数分钟的全量编译, 每次按下保存都会触发一次10s到1m不等的增量编译让我苦不堪言, 庞大的依赖使其每一次编译都会涉及很多文件和 ...

  5. 工程优化暨babel升级小记

    小记背景 随着业务代码的增多,项目代码的编译时长也在增多,遂针对这个痛点在dev下做些优化 第一部分:优化dev编译时间 这里优化的主要思路是在dev环境下,单独出来一个dll配置文件,将项目中的部分 ...

  6. webpack + vuecli多页面打包基于(vue-template-admin)修改

    转: webpack + vuecli多页面打包基于(vue-template-admin)修改 遇见的问题TypeError: Cannot read property 'tap' of undef ...

  7. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  8. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

  9. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

随机推荐

  1. 初步学习pg_control文件之十一

    接前文  初步学习pg_control文件之十,再看这个 XLogRecPtr prevCheckPoint; /* previous check point record ptr */ 发生了che ...

  2. 海思NB-IOT的SDK添加AT指令方法

    1. 首先打开app_at_cmd_parse.c文件,在文件的末尾找到,可在中间添加需要的代码 /查询电信自注册结果 {AT_FLAG_VISIABLE | AT_FLAG_LOGABLE, &qu ...

  3. jmeter插件之jsonpath提取响应结果和做断言

    准备工作: 1. jmeter3.X已经自带了提取响应结果的插件:JSON Extractor 2. 下载断言插件:https://jmeter-plugins.org/wiki/JSONPathAs ...

  4. 小程序如何去掉button组件的边框

    小程序获取用户授权不再支持wx.getUserInfo方法,改为用button获取,格式如下 <button class="btn btn" open-type=" ...

  5. 「日常训练」Soldier and Badges (CFR304D2B)

    题意 (Codeforces 546B) 问对一个序列最少需要增减几个1能使其彼此不同. 分析 模拟处理.需要注意的是,尽管题目中说了an<=3000,问题是,如果一群a全是3000呢(滑稽), ...

  6. Qt 建立带有子项目的工程

    刚需,软件需要用到多个子项目 第一步 打开Qt新建子项目工程 如图 在此时鼠标右键,选着新建子项目如图 就是正常的新建项目的步骤,直接上图 完工,可以愉快的撸代码了

  7. you need to resolve your current index first 已解决

    从一个分支A切换到另一个分支B后,对切换后的B分支进行pull操作,因为pull操作实际上包含了fetch+merge操作,在执行 merge操作时,由于很长时间没有对B分支执行过pull/merge ...

  8. Leetcode 686.重复叠加字符串匹配

    重复叠加字符串匹配 给定两个字符串 A 和 B, 寻找重复叠加字符串A的最小次数,使得字符串B成为叠加后的字符串A的子串,如果不存在则返回 -1. 举个例子,A = "abcd", ...

  9. LeetCode 622——设计循环队列

    1. 题目 设计你的循环队列实现. 循环队列是一种线性数据结构,其操作表现基于 FIFO(先进先出)原则并且队尾被连接在队首之后以形成一个循环.它也被称为"环形缓冲器". 循环队列 ...

  10. Julia 学习笔记(一):数组

    个人向,只会记录一些需要注意的点. 前言 学习 Julia 已经有一段时间了,但是进步缓慢.这一方面是最近代码写得少,一方面是 Julia 学习资料少.中文资料更少,但也有我没做笔记的缘故导致学习效率 ...