webpack基础

Posted 2020-08-29

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

安装

在node环境下，通过npm安装webpack

npm install webpack -g

启动webpack

webpack     // 执行一次开发的编译
webpack -p  // 针对发布环境编译(压缩代码)
webpack -w  // 进行开发过程持续的增量编译(飞快地!)
webpack -d  // 生成map映射文件，告知哪些模块被最终打包到哪里了
webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包

配置文件(webpack.config.js)

var webpack = require(‘webpack‘);
var commonsPlugin = webpack.optimize.CommonsChunkPlugin;
 
module.exports = {      
    entry: {
        index : ‘./index.js‘
    },   
    output: {
        path: path.resolve(__dirname, ‘./dist‘),
        filename: ‘build.[name].js‘
    },
    module: {       
        loaders: [
            { test: /\.css$/, loader: ‘style-loader!css-loader‘ },
            { test: /\.js$/, loader: ‘jsx-loader?harmony‘ },
            { test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘},
            { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192‘}
        ]
    },
　　plugins: [new commonsPlugin("commons.js")]
};

1、entry页面入口文件配置，output 是对应输出项配置

entry: {
    page1: "./page1.js",
    //支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
    page2: "./page2.js"
},
output: {
    path: path.resolve(__dirname, ‘./dist‘),
    filename: ‘build.[name].js‘
}

最终会生成一个build.page1.js和build.page2.js，并存放在./dist文件下。

模块加载器

1、style-loader css-loader

安装：npm install --save-dev style-loader css-loader

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

style-loader表示将所有的计算后的样式加入页面中，css-loader表示使用类似@import 和 url(...)的方法实现 require()的功能。二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

2、url-loader

安装：npm install --save-dev url-loader

{test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192‘}

url-loader可以用来打包css中引用的图片,如上，在小于8K的图片将直接以base64的形式内联在代码中

3、babel-loader

安装：npm install --save-dev babel-loader babel-core babel-preset-es2015 

{ test: /\.js$/, loader: ‘babel-loader‘, exclude: /node_modules/}

将所有目录下的es6代码转译为es5代码，但不包含node_modules目录下的文件

3、sass-loader

安装：npm install --save-dev sass-loader

 

{ test: /\.scss$/, loader: ‘style!css!sass‘}

配置webpack-dev-server

构建本地服务器，自动刷新新监测代码，

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

//webpack.config.js
module.exports = {
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  }
}

//package.json
"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}

 

插件plugins

1、CommonsChunkPlugin自定义公共模块提取

用于提取多个入口文件的公共部分，然后生成一个common.js来方便多页面之间进行利用。

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin(‘common.js‘); 

plugins: [
        commonsPlugin
]

2、extract-text-webpack-plugin 独立打包样式文件

有时候可能希望项目的样式能不要被打包到脚本中，而是独立出来作为.css，然后在页面中以<link>标签引入。这时候我们需要 extract-text-webpack-plugin 来帮忙：

安装：npm install --save-dev extract-text-webpack-plugin

var ExtractTextPlugin = require("extract-text-webpack-plugin");

plugins: [    
    new ExtractTextPlugin(‘[name].css‘, {allChunks: true})
],
module: {
    loaders: [
        { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") },
        { test: /\.scss$/, loader: ExtractTextPlugin.extract(‘style-loader‘, ‘css-loader!sass-loader‘) },
    ]
}