5分钟入门webpack

    我们知道如果想要开发react我们的webpack是必须的,接下来我们一步一步的来介绍

     1.先全局安装npm install webpack -g全局安装

      2.创建配置文件

            (1)webpack.base.config.js  //公用的配置放在这里面(可通过插件继承)
    (2)webpack.develop.config.js  //开发环境中用到的配置文件
    (3)webpack.publish.config.js   //生产环境中用到的配置文件

    3.最重要的一步千万别忘记安装到npm的环境中

    4.npm run develop

    5,接下来是配置文件的内容

    

/**
 * 项目开发环境配置文件
 */
var path = require('path');
// 自动打开浏览器插件
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
    // entry:path.resolve(__dirname,'src/js/app.js'),
    entry:[
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080',
        path.resolve(__dirname,'src/js/app.js')
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    eslint: {
        configFile: '.eslintrc.js'
    },
    module: {
        preLoaders: [
            { test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/ }
        ],
        loaders: [
            // 处理jsx语法和ES6语法
            {
                test: /\.jsx?$/, // 用正则来匹配文件路径,这段意思是匹配 js 或者 jsx
                loader: 'babel',// 加载模块 "babel" 是 "babel-loader" 的缩写
            },
            // {
            //     test: /\.js$/,
            //     loader: "eslint",
            //     exclude: /node_modules/
            // },
            // 处理在js中引用css
            {
                test: /\.css$/, // Only .css files
                loader: 'style!css' // 如果有多个加载器,中间作用感叹号隔开,多个加载器是从右往左去执行
            },
            {
                test: /\.scss$/,
                loader: 'style!css!sass'
            },
            // 1kb=1024b 1b=8bit   25000bit~3kb
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                loader: 'url?limit=25000'
            },
            {
                test: /\.(eot|woff|ttf|woff2|svg)$/,
                loader: 'url'
            }

        ]
    },
    resolve: {
        // 自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
        // 注意一下, extensions 第一个是空字符串! 对应不需要后缀的情况.
        extensions: ['', '.js', '.json', '.scss', '.jsx']
        // 模块别名定义,方便后续直接引用别名,无须多写长长的地址。后续直接 require('AppStore') 即可
        //alias: {
        //    AppStore: 'js/stores/AppStores.js',
        //    ActionType: 'js/actions/ActionType.js',
        //    AppAction: 'js/actions/AppAction.js'
        //}
    },
    plugins: [
        new OpenBrowserPlugin({url: 'http://localhost:8080/', browser: 'chrome'})
    ]

}


/**
 * 项目部署环境配置文件
 */

var path = require('path');
var webpack = require('webpack')
// 抽取css的第三方插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 自动生成index.html页面插件
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 删除文件夹
var CleanPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: path.resolve(__dirname, 'src/js/app.js'),
        vendors: ['react', 'react-dom','react-router']
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        // // 为了做代码的异步加载
        // publicPath:'/',
        // chunkFilename: '[name]_[chunkhash:8]_chunk.js'
    },
    module: {
        loaders: [
            // 处理jsx语法和ES6语法
            {
                test: /\.jsx?$/, // 用正则来匹配文件路径,这段意思是匹配 js 或者 jsx
                loader: 'babel',// 加载模块 "babel" 是 "babel-loader" 的缩写
            },
            {
                test: /\.css$/, // Only .css files
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
            },
            // 1kb=1024b 1b=8bit   25000bit~3kb
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                loader: 'url?limit=25000&name=images/[name].[ext]'
            },
            {
                test: /\.(eot|woff|ttf|woff2|svg)$/,
                loader: 'url'
            }

        ]
    },
    resolve: {
        // 自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
        // 注意一下, extensions 第一个是空字符串! 对应不需要后缀的情况.
        extensions: ['', '.js', '.json', '.scss', '.jsx'],
        // 模块别名定义,方便后续直接引用别名,无须多写长长的地址。后续直接 require('AppStore') 即可
        // alias: {
        //     ReactJS:"node_modules/react/react.min.js",
        //    AppStore: 'js/stores/AppStores.js',
        //    ActionType: 'js/actions/ActionType.js',
        //    AppAction: 'js/actions/AppAction.js'
        // }
    },
    // 在这个属性里面定义的包是不会被打包进bundle。js文件中的,如果你要用这个属性,别忘了在index。html中引入cdn
    // externals: {
    //    // 配置了这个属性之后react和react-dom这些第三方的包都不会被构建进js中,那么我们就需要通过cdn进行文件的引用了
    //    // 前边这个名称是在项目中引用用的,相当于import React from  ‘react1’中的react,
    //    //'react1':"react",
    //    'react1':"react",
    //    'react-dom1':"react-dom",
    //     '$1':"jQuery"
    //
    // },
    plugins: [
        // 构建之前先删除dist目录下面的文件夹
        new CleanPlugin(['dist']),
        // 分离第三方应用插件,name属性会自动指向entry中vendros属性,filename属性中的文件会自动构建到output中的path属性下面
        new webpack.optimize.CommonsChunkPlugin({name: 'vendors', filename: 'vendors.js'}),
        // 用webpack压缩代码,可以忽略代码中的警告
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        // 可以新建多个抽离样式的文件,这样就可以有多个css文件了。
        new ExtractTextPlugin("app.css"),
        // compiling our final assets
        new HtmlWebpackPlugin({
            template: './src/template.html',
            htmlWebpackPlugin: {
                "files": {
                    "css": ["app.css"],
                    "js": ["vendors.js","bundle.js"]
                }
            },
            // 效果不大,情怀至上
            // minify: {
            //     removeComments: true,
            //     collapseWhitespace: true,
            //     removeAttributeQuotes: true
            // }
        }),
        new webpack.DefinePlugin({
            //去掉react中的警告,react会自己判断
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
    ]
}






    接下来就可以进行开发了

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值