Webpack 常用配置

5月 14, 2017

本地开发服务器

安装 webpack-dev-server

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

修改配置文件 webpack.config.js

module.exports = {
    ...
    devServer: {
        contentBase: "./",  //告诉服务器在哪里，从提供内容
        port: 9000,         //端口
        inline: true,       //
        compress: false,    //是否启用gzip压缩
        historyApiFallback: false,  //将404定向到固定位置
    }
    ...
};

修改 package.json

{
  ...
  "scripts": {
    "dev": "webpack-dev-server",
  },
  ...
}

webpack HotModuleReplacement

1	npm install --save react-hot-loader@next

Create a .babelrc

{
  "presets": [
    ["es2015", {"modules": false}],
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

webpack.config.js

const { resolve } = require('path');
const webpack = require('webpack');

module.exports = {
  context: resolve(__dirname, 'src'),

  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './index.js'
    // the entry point of our app
  ],
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist'),
    publicPath: '/'
  },

  devtool: 'inline-source-map',

  devServer: {
    hot: true,
    // enable HMR on the server
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [ 'babel-loader', ],
        exclude: /node_modules/
        //注意，这里不能使用 options: {} 应该在项目根目录创建 .babelrc
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader?modules', ],
      },
    ],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    // prints more readable module names in the browser console on HMR updates
  ],
};

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

import { AppContainer } from 'react-hot-loader';
// AppContainer is a necessary wrapper component for HMR

import App from './components/App';

const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Component/>
    </AppContainer>,
    document.getElementById('root')
  );
};

render(App);

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./components/App', () => {
    render(App)
  });
}

webpack 仪表盘

安装 webpack-dashboard

1	npm install webpack-dashboard --save-dev

修改配置文件 webpack.config.js

// Import the plugin:
var DashboardPlugin = require('webpack-dashboard/plugin');

// If you aren't using express, add it to your webpack configs plugins section:
plugins: [
    new DashboardPlugin({ port: 3001 })
]

// If you are using an express based dev server, add it with compiler.apply
compiler.apply(new DashboardPlugin());

HTML代码热加载

webpack-dev-server 只能监控入口文件（JS/LESS/CSS/IMG）的变化，因此 HTML 文件的变化必须依赖插件来进行监控。
安装 html-webpack-plugin

1	npm install html-webpack-plugin --save-dev

修改配置文件 webpack.config.js，把 index.html 加入监控

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    ...
    plugins: [
        new HtmlWebpackPlugin({   // html代码热加载
            template: './index.html'
        }),
    ],
    ...
};

自动打开浏览器

安装 open-browser-webpack-plugin

1	npm install open-browser-webpack-plugin --save-dev

修改配置文件 webpack.config.js

var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
    ...
    plugins: [
        new OpenBrowserPlugin({ //自动打开浏览器
            url: 'http://localhost:9000'
        })
    ],
    ...
};

配置 json 加载器

安装 json-loader

1	npm install json-loader --save-dev

修改配置文件 webpack.config.js

module.exports = {
    ...
    module: { 
        rules: [{
            test: /\.json$/,
            use: [
                { loader: "json-loader" },
            ]
        }]
    }
};

创建 config.json 文件，内容如下

{
    "name": "demo",
    "type": "HTML5"
}

使用

1
2
3

var config = require('../config.json')

console.log(config.name);

配置 LESS 编译

安装 less style-loader css-loader less-loader

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

module.exports = {
    ...
    module: { 
        rules: [
        {
            test: /\.less$/,
            use: [
                { loader: "less-loader" },
                { loader: "style-loader" },
                {
                    loader: "css-loader",
                    options: {
                        modules: true,
                    }
                }
            ]
        },
    }
};

配置 Babel 编译

安装 babel-core babel-loader babel-preset-es2015

1	npm install babel-core babel-loader babel-preset-es2015 --save-dev

修改配置文件 webpack.config.js

module.exports = {
    ...
    module: { 
        rules: [{
            test: /\.js$/,   //babel解析器
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015']
            }
        }]
    }
};

配置 React

安装 babel-core babel-loader babel-preset-es2015 babel-preset-react

1	npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

修改配置文件 webpack.config.js

module.exports = {
    ...
    module: { 
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: [
                    path.resolve(__dirname, "/node_modules/")
                ],
                query: {
                    presets: ['es2015','react']
                }
            }
        ]
    }
};

配置 jQuery 解析器

安装 jquery

1	npm install jquery --save-dev

修改配置文件 webpack.config.js

module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({   //jquery解析器
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ]
};

配置 js 代码压缩

修改配置文件 webpack.config.js, 在 plugin 中添加 webpack.optimize.UglifyJsPlugin 模块

var webpack = require('webpack');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

module.exports = {
    ...
    plugins: [
         new uglifyJsPlugin({ //js代码压缩
            compress: {
                warnings: false
            }
        })
    ]
};

配置 eslint 语法解析

安装 esline 库

npm install eslint eslint-loader eslint-friendly-formatter eslint-plugin-html babel-eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard --save-dev

在项目根目录下添加 eslint 配置文件 .eslintrc.js

// http://eslint.org/docs/user-guide/configuring
module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    "indent": [2, 4],//缩进风格
    'no-undef': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

修改配置文件 webpack.config.js
安装 url-loader

1	npm install url-loader --save-dev

修改配置文件 webpack.config.js

module.exports = {
    ...
    module: { 
        loaders: [{
            test: /\.(png|jpg)$/,
            use: [
                {
                    loader: "url-loader"
                }
            ]
        }]
    }
};

配置图片

module.exports = {
    ...
    module: { 
        loaders: [
        ]
    }
};

配置 normalize.css

安装 normalize.css

1	npm install normalize.css --save

使用

1	import 'normalize.css';

配置 iconfont

http://www.iconfont.cn/ 选图标，添加到购物车，下载代码。
有三种方式，推荐使用 unicode 方式，将字体文件和 iconfont.css 放到项目中
iconfont.css 修改字体路径例如 url('../font/iconfont.woff?t=1494653894295') 形式

修改 webpack.config.js 配置 url-loader

module.exports = {
    ...
    module: { 
        loaders: [{
            test: /\.(woff|svg|eot|ttf)\??.*$/,
            use: [
                {
                    loader: "url-loader"
                }
            ]
        }]
    }
};

使用 iconfont

import React, { Component } from 'react';
import Font from '../../style/iconfont.css';

class Banner extends Component{
    render(){
        return (
            <div className={Style.historyButtonBack+" "+Font.iconfont+" "+Font["icon-houtui"]}></div>
        )
    }
}

评论和共享

Webpack 学习笔记

11月 14, 2016

webpack学习笔记

基础打包命令：

1	webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方}

通过配置文件使用：

module.exports = {
    devtool: 'eval-source-map',             //配置生成Source Maps，选择合适的选项
    entry:  __dirname + "/app/main.js",     //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public",        //打包后的文件存放的地方
        filename: "bundle.js"               //打包后输出文件的文件名
    },
    module: {                               //在配置文件里添加JSON loader
        loaders: [
            {
                test: /\.json$/,
                loader: "json"
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',            //在webpack的module部分的loaders里进行配置即可
                query: {
                    presets: ['es2015','react']
                }
            }
        ]
    },
    devServer: {
        contentBase: "./public",        //本地服务器所加载的页面所在的目录
        colors: true,                   //终端中输出结果为彩色
        historyApiFallback: true,       //不跳转
        inline: true                    //实时刷新
    }
}

打包命令：

webpack

也可以将此命令封装到npm中

注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

生成Source Maps（使调试更容易）
| devtool选项 | 配置结果 |
|————|—|
|source-map | 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度；|
|cheap-module-source-map|在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；|
|eval-source-map|使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项；|
|cheap-module-eval-source-map|这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；|
使用webpack构建本地服务器
安装：
1
npm install --save-dev webpack-dev-server

配置：

|devserver配置选项|功能描述|
|-----|-----|
|contentBase|默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）|
|port|设置默认监听端口，如果省略，默认为”8080“|
|inline|设置为true，当源文件改变时会自动刷新页面|
|colors|设置为true，使终端输出的文件为彩色的|
|historyApiFallback|在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html|

运行服务器：
1
webpack-dev-server

Loaders
Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置，Loaders的配置选项包括以下几方面：
- test：一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
- loader：loader的名称（必须）
- include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
- query：为loaders提供额外的设置选项（可选）
Babel
Babel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过编译帮你达到以下目的：
- 下一代的JavaScript标准（ES6，ES7），这些标准目前并未被当前的浏览器完全的支持；
- 使用基于JavaScript进行了拓展的语言，比如React的JSX
  
  Babel包的安装
  1
  2
  // npm一次性安装多个依赖模块，模块之间用空格隔开
  npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
  babel-core — 核心功能
  
  babel-preset-es2015 — 解析Es6
  
  babel-preset-react — 解析JSX
  
  为了测试Babel安装是否成功需要安装React和React-DOM
  1
  npm install --save react react-dom

#### Babel的配置选项
<p>
Babel其实可以完全在webpack.config.js中进行配置，但是考虑到babel具有非常多的配置选项，
在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，
因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。
我们现在的babel的配置并不算复杂，不过之后我们会再加一些东西，因此现在我们就提取出相关部分，
分两个配置文件进行配置（webpack会自动调用.babelrc里的babel配置选项），如下：
</p>
1
2
3
4
//.babelrc
{
  "presets": ["react", "es2015"]
}

CSS

webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，
css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,
style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
- 安装
  1
  npm install --save-dev style-loader css-loader

<p style="color:#ff5656">注：感叹号的作用在于使同一文件能够使用不同类型的loader</p>

CSS module
把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。相同的类名也不会造成不同组件之间的污染。
CSS modules 也是一个很大的主题，有兴趣的话可以去官方文档查看更多消息

CSS预处理器

这里使用postcss来示范

1 2	npm install --save-dev postcss-loader autoprefixer //autoprefixer 自动添加前缀的插件

插件（Plugins）

Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，
loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，
插件并不直接操作单个文件，它直接对整个构建过程其作用。
- BannerPlugin：(编译后的文件前添加信息)
  1
  2
  3
  plugins: [
  new webpack.BannerPlugin("Copyright Flying Unicorns inc.") //在这个数组中new一个就可以了
  ],

* HtmlWebpackPlugin (依据一个简单的模板，帮你生成最终的Html5文件)

1
npm install --save-dev html-webpack-plugin


1
2
3
4
5
6
7
8
//webpack
var HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
    })
  ],



* HtmlWebpackPlugin (热更新插件)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
npm install --save-dev babel-plugin-react-transform react-transform-hmr

//webpack.config.js -> plugins
new webpack.HotModuleReplacementPlugin()//热加载插件

//.babelrc ->
{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
    "plugins": [["react-transform", {
       "transforms": [{
         "transform": "react-transform-hmr",

         "imports": ["react"],

         "locals": ["module"]
       }]
     }]]
    }
  }
}

产品阶段的构建
创建一个“webpack.production.config.js”的文件，在里面加上基本的配置,它和原始的webpack.config.js很像
1
2
//package.json -> scripts
webpack --config ./webpack.production.config.js --progress

优化插件
- OccurenceOrderPlugin :为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
- UglifyJsPlugin：压缩JS代码；
- ExtractTextPlugin：分离CSS和JS文件
  
  OccurenceOrderPlugin 和 UglifyJsPlugin 是内置插件
  1
  npm install --save-dev extract-text-webpack-plugin
  1
  2
  3
  //webpack.production.config.js -> plugins
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.optimize.UglifyJsPlugin(),

出处
本文参考入门Webpack，看这篇就够了

评论和共享

BrowserSync 使用手册

9月 04, 2016

全局安装

1	npm install -g browser-sync

项目中安装

1	npm install --save-dev browser-sync

启动 BrowserSync

//监听一个文件
browser-sync start --server --files "css/*.css"

//监听多个文件
// 如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"

//指定端口
browser-sync start --server --port "3031" --files "**/*.css, **/*.html"

中文官网文档

www.browsersync.cn

评论和共享

第 1 页共 1 页

Webpack 常用配置

本地开发服务器

webpack HotModuleReplacement

webpack 仪表盘

HTML代码热加载

自动打开浏览器

配置 json 加载器

配置 LESS 编译

配置 Babel 编译

配置 React

配置 jQuery 解析器

配置 js 代码压缩

配置 eslint 语法解析

配置图片

配置 normalize.css

配置 iconfont

Webpack 学习笔记

webpack学习笔记

基础打包命令：

通过配置文件使用：

生成Source Maps（使调试更容易）

使用webpack构建本地服务器

Loaders

Babel

CSS

安装

CSS module

CSS预处理器

插件（Plugins）

产品阶段的构建

优化插件

出处

BrowserSync 使用手册

全局安装

项目中安装

启动 BrowserSync

中文官网文档

Archie Shi

用 Express,Socket.io 搭建 WebSocket 服务器

JavaScript 事件捕获和冒泡

MongoDB 基本语法

BrowserSync 使用手册

CMD快速配置IP地址和DNS

JavaScript 简介

Webpack 学习笔记

嗅探，arp欺骗，会话劫持

用 Kali-Linux 进行 Wifi 破解

Kali-Linux 更新、环境配置