全回顾扫盲之webpack详解析

var path = require('path')

nodejs 环境下运行,按照commonjs规范,path获取的是nodejs提供的模块

var webpack = require('webpack')

安装依赖的模块,先去package.json里面找到依赖的模块,然后再去node_modules里面找对应的模块‘webpack’,然后去模块里找package.json,进去找到main入口,然后对应找到文件

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

这个插件的作用是依据index.html,自动引用打包后的js,然后生成新的index.html。在app目录下,创建一个index.tmpl.html文件模版

var ExtractTextPlugin = require('extract-text-webpack-plugin')

分离CSS和JS文件

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

打开浏览器

entry: path.resolve(__dirname, 'app/index.jsx'),

入口文件,path是nodejs的模块,方法用于将相对路径转为绝对路径

var path = require('path')
/**
 * nodejs 环境下运行,按照commonjs规范,path获取的是nodejs提供的模块
 */
var webpack = require('webpack')
/**
 * 安装依赖的模块,先去package.json里面找到依赖的模块,然后再去node_modules里面找对应的模块‘webpack’,
 * 然后去模块里找package.json,进去找到main入口,然后对应找到文件
 */
var HtmlWebpackPlugin = require('html-webpack-plugin')
/**
 * 这个插件的作用是依据index.html,自动引用打包后的js,然后生成新的index.html
 * 在app目录下,创建一个index.tmpl.html文件模版
 */
var ExtractTextPlugin = require('extract-text-webpack-plugin')
/**
 * 分离CSS和JS文件
 */
var OpenBrowserPlugin = require('open-browser-webpack-plugin')

module.exports = {
    /**
     * 入口文件
     */
    entry: path.resolve(__dirname, 'app/index.jsx'),
    /**
     * 输出文件
     */
    output: {
        filename: 'bundle.js'
    },
    /**
     * 自动解析后缀
     */
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    /**
     * 模块
     */
    module: {
        /***
         * 声明加载loader
         * exclude:排除
         */
        loaders: [
            {test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel'},
            {test: /\.less$/, exclude: /node_modules/, loader: 'style!css!postcss!less'},
            {test: /\.css/, exclude: /node_modules/, loader: 'style!css!postcss'},
            {test: /\.(png|gif|jpg|jpeg|bmp)/i, exclude: /node_modules/, loader: 'url-loader?limit=5000'},
            {test: /\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, exclude: /node_modules/, loader: 'url-loader?limit=5000'},
        ]
    },
    postcss: [
        /**
         * 自动补充前缀
         */
        require('autoprefixer')
    ],
    plugins: [
        /**
         * html模版
         */
        new HtmlWebpackPlugin({
            template: __dirname + '/app/index.tmpl.html'
        }),
        /**
         * 热加载
         */
        new webpack.HotModuleReplacementPlugin(),
        /**
         * 打开浏览器
         */
        new OpenBrowserPlugin({
            url: 'http://loaclhost:8080'
        }),
        /**
         * 可在业务js代码中使用__DEV__判断是否为dev模式
         */
        new webpack.DefinePlugin({
            __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
        })
    ],
    devServer: {
        /**
         * 本地服务器所加载的页面所在的目录
         */
        contentBase: "./public",
        colors: true, // 终端中输出结果为彩色
        historyApiFallback: true, // 不跳转
        inline: true, // 实时刷新
        hot: true  // 使用热加载插件 HotModuleReplacementPlugin
    }
}
  

随机浏览