js之webpack面试篇

介绍：

webpack是收把项目当作一个整体，通过一个给定的的主文件， webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件

1.安装

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

webpack是模块打包机，webpack-dev-server用来创建本地服务器，监听你的代码修改，并自动刷新修改后的结果,查看webpack的配置文件devServer

2.entry: 用来写入口文件，它将是整个依赖关系的根

3.output: 即使入口文件有多个，但是只有一个输出配置

4.loader使用：.babelrc文件

负责的是处理源文件的如css、jsx，一次处理一个文件，在webpack.config.js里边单独用module进行配置

常见loader：babel-loader 转化js css-loader,style-loader解析css less-loader解析less file-loader:

5.Plugins使用：HtmlWebpackPlugin，HotModuleReplacementPlugin

webpack.config.js的配置如下：

var baseConfig = {

entry: {
    main: './src/index.js'
},

output: {
    filename: '[name].js',//name为entry的key
    path: path.resolve('./build')
},

devServer: {
    contentBase: './src',// 本地服务器所加载的页面所在的目录
    port, // 监听端口，默认8080
    historyApiFallback: true, // 不跳转
    inline: true // 实时刷新
},

module: {
    rules: [
        {
            test: /\.less$/,//匹配所处理文件的扩展名的正则表达式（必须）
                // use: [
                // {loader: 'style-loader'},
                // {loader: 'css-loader'},
                // {loader: 'less-loader'}
            // ],

            use: ExtractTextPlugin.extract[
                {loader: 'style-loader'},
                {loader: 'css-loader'},
                {loader: 'less-loader'}
            ],

            exclude: /node_modules/ //include/exclude手动添加处理的文件，屏蔽不需要处理的文件（可选）
        }]
    },

    plugins: [
        new HTMLWebpackPlugin(),//成一个自动引用你打包后的js文件的新index.html
        new webpack.HotModuleReplacementPlugin(),//它允许你在修改组件代码时，自动刷新实时预览修改后的结果
        new ExtractTextPlugin('main.css'),//为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。如果不使用就会把css打包在js文件里

        // 优化代码插件
        new webpack.optimize.OccurenceOrderPlugin(),//为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多 的模块，然后为他们分配最小的ID
        new webpack.optimize.UglifyJsPlugin()//压缩代码
    ]

}