频道栏目
首页 > 资讯 > HTML/CSS > 正文

5分钟入门webpack

17-01-16        来源:[db:作者]  
收藏   我要投稿

我们知道如果想要开发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'})  
    ]  
  
}  
  
  
<pre code_snippet_id="2128837" snippet_file_name="blog_20170115_1_4060150" name="code" class="html">/**  
 * 项目部署环境配置文件  
 */  
  
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"'  
            }  
        }),  
    ]  
}
相关TAG标签
上一篇:css3弹性伸缩布局
下一篇:多列布局
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站