前端之webpack

webpack的四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)

指令：

1.安装node.js
2.npm install webpack -g
3.mkdir webpack-demo && cd webpack-demo
4.npm init -y
5.npm install --save-dev webpack

webpack.config.js

const webpack = require('webpack'); 

const config = {
  entry: __dirname+'/index.js',//入口
  output: {//打包输出位置
    path: __dirname+'/dist',
    filename: 'bundle.js'
  },
  module: {//模块
    rules: [
      {test: /\.css$/, use: 'css-loader'}//解析器
    ]
  },
  plugins: [//插件
    new webpack.optimize.UglifyJsPlugin()  ]//压缩
};

module.exports = config; 


entry:打包的入口文件，一个字符串或者一个对象
output:配置打包的结果，一个对象
fileName：定义输出文件名，一个字符串
path：定义输出文件路径，一个字符串
module:定义对模块的处理逻辑，一个对象
loaders：定义一系列的加载器，一个数组
[
　{
test:正则表达式，用于匹配到的文件
loader/loaders：字符串或者数组，处理匹配到的文件。如果只需要用到一个模块加载器则使用　　　　　　　　　　　　　　　　　loader：string，如果要使用多个模块加载器，则使用loaders：array
include:字符串或者数组，指包含的文件夹
exclude:字符串或者数组，指排除的文件夹
    }
]
resolve:影响对模块的解析，一个对象
extensions：自动补全识别后缀，是一个数组
resolve 
webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀
 resolve:{
     extensions:['','.js','.json']
 }
plugins:定义插件，一个数组

 externals: {
     "jquery": "jQuery"
 }
 当我们想在项目中require一些其他的类库或者API，而又不想让这些类库的源码被构建到运行时文件中，这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题


webpack.config.js

const path=require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//html模板插件
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports={
    // entry:'./src/index.js',
    entry:{
        app:'./src/index.js',
        print:'./src/print.js'
    },
    output:{
        filename:'[name].bundle.js',
        path:path.resolve(__dirname,'dist')
    },
    devtool: 'inline-source-map',//开发测试使用
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                'style-loader',
                'css-loader'
                ]
            },{
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use:[
                    'file-loader'
                ]
            },
            {
                test: /\.(csv|tsv)$/,
                use: [
                 'csv-loader'
                 ]
            },
            {
                test: /\.xml$/,
                use: [
                  'xml-loader'
                 ]
            },          

        ]
    },
    plugins:[
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title:'Output Management'
        })
    ]
};