前端之webpack

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

指令：

1.安装node.js2.npm install webpack -g3.mkdir webpack-demo && cd webpack-demo4.npm init -y5.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：arrayinclude:字符串或者数组，指包含的文件夹exclude:字符串或者数组，指排除的文件夹    }]resolve:影响对模块的解析，一个对象extensions：自动补全识别后缀，是一个数组resolve webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀 resolve:{     extensions:['','.js','.json'] }plugins:定义插件，一个数组 externals: {     "jquery": "jQuery" } 当我们想在项目中require一些其他的类库或者API，而又不想让这些类库的源码被构建到运行时文件中，这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题webpack.config.jsconst 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'        })    ]};