webpack基本配置

webpack的使用已经是趋势，过多的这里也不多说，直接进入正题

---

这里假定你的电脑上已经安装了node.js、npm、cnpm、webpack如果没有安装或者不会的请自行百度一下，网上有很多教程；这里就不在赘述；

---

步骤

一、在你的目录下新建一个文件夹，名字随便取，这里假定文件名为demo;

---

二、打开命令行进入到你新建的demo文件夹；

---

三、在命令行输入 npm init

将会出现如下界面

只要一直点击Enter键就行了，之后会在demo内自动创建一个package.json文件，这里先不管这个文件；

---

四、继续在命令行输入: npm install webpack –save-dev 安装完了之后将会在demo文件夹内生成node_modules文件夹，这里不用去管他，这里面都是一些依赖包；

---

五、在demo文件夹下新建一个webpack.config.js的js文件，文件名唯一且固定；我们之后所有的配置都在这个js文件中；

---

六、在demo文件下新建dist、src两个文件夹和一个index.html，dist文件夹主要用来存放webpack打包之后的文件，src主要来存放项目所需要的一些资源和你的代码；index.html就是你的页面，当然这三个文件的名字并不一定如此；

---

七、用编辑器打开demo文件,然后打开webpack.config.js文件；（这里编辑器推荐使用atom、sublime、webstrom）

---

webpack.config.js文件中的配置如下；

const path=require('path');//node下的路径;
const webpack=require('webpack');//引入webpack;


/** 
 * extract-text-webpack-plugin插件主要的作用是分离css文件,使得css独立出来，不再打包到js文件当中;
 * 使用这个插件的时候首先需要在命令行安装这个插件:npm install --save-dev extract-text-webpack-plugin
**/

const ExtractTextPlugin=require('extract-text-webpack-plugin');

/**
 * html-webpack-plugin插件主要的作用是将html文件打包出来;
 * 使用这个插件的时候首先需要在命令行安装这个插件:npm install --save-dev html-webpack-plugin
**/
const HtmlWebpackPlugin=require('html-webpack-plugin');
/**
 * clean-webpack-plugin插件主要的作用是将清除之前打包的文件,当然如果你的文件名固定就不需要此插件;
 * 使用这个插件的时候首先需要在命令行安装这个插件:npm install --save-dev clean-webpack-plugin
**/
const CleanWebpackPlugin=require('clean-webpack-plugin');

module.exports={
    entry:{//入口
        //这里是你写的js打包成一个文件
        index:path.resolve(__dirname,'src/index.js'),
        //这里是你所引入的框架打包成一个文件,假定你的框架安装在了node包下面;
        vendor : ['jquery']
    },
    output: {//出口
        path: path.resolve(__dirname,'dist'),//出口文件存放的位置
        filename: 'js/[name].min.js?v=[hash:7]'//打包文件的名字;这里前面的js/主要作用是为了使打包的js文件单独存放在一个文件夹下，名字可自定义
    },
    module:{
        rules:[//webpack 2.0之后一律使用rules这种写法
            {
                test:/\.js$/,//匹配扩展名为.js的文件
                /**
                 * babel-loader使用之前先在命令行安装npm install --save-dev babel-loader
                 * 主要的作用是将es6 7这类浏览器暂未支持的js语法转换为浏览器当前能识别的js语法;如果你的项目中未使用这类js，你也可以不用，但是建议使用这类js，因为在未来一定会使用;
                **/
                loader:'babel-loader',
                /**
                 * latest使用之前先在命令行安装npm install --save-dev babel-preset-latest
                 * latest作用是兼容所有的写法
                 * 想要了解更多babel的知识，[百度](http://babeljs.io/)
                **/
                options:{
                    "presets":["latest"]
                }
            },
            {
                test:/\.css$/,//匹配扩展名为.css的文件
                exclude:[//这句语法的意思是忽略查找这里面的文件
                    path.resolve(__dirname,'node_modules'),
                ],
                /**
                 * .css文件使用之前先在命令行安装npm install --save-dev css-loader style-loader
                 * 使用extract-text-webpack-plugin插件分离css文件
                 * postcss-loader使用之前先在命令行安装npm install --save-dev postcss-loader
                 * postcss插件的主要作用是对css进行一系列的操作；
                 * 安装完postcss-loader之后再安装autoprefixer
                 * 安装方法是npm install --save-dev autoprefixer
                 * autoprefixer的作用是自动补全浏览器的前缀写法，使得css3的一些样式当前浏览器能够兼容识别，比如border-radius:10px;在谷歌浏览器下面会自动增加一个谷歌浏览器能识别的写法。-webkit-border-radius:10px;
                 * ?import=1这句话的意思是使用@import引进来的文件也能使用到postcss插件
                 * 如需了解更多postcss和autoprefixer插件的使用 [请搜索](https://www.npmjs.com/package/postcss)和[请搜索](https://www.npmjs.com/package/autoprefixer)
                 * 在autoprefixer官方教程中webpack.config.js文件中配置autoprefixer有的会出现一些BUG，建议在demo文件夹根目录下新建postcss.config.js在这里面去配置autoprefixer
                 * postcss.config.js文件中写入：module.exports={
                        plugins:[
                            require('autoprefixer')({
                                broswers: ['last 5 versions']
                            })
                        ]
                    }
                **/
                use:ExtractTextPlugin.extract({
                    use:'css-loader?import=1!postcss-loader'
                })
            },
            {
                test:/\.scss$/,//匹配扩展名为.scss的文件
                exclude:[//这句语法的意思是忽略查找这里面的文件
                    path.resolve(__dirname,'node_modules'),
                ],
                use:ExtractTextPlugin.extract({
                    use:'css-loader!postcss-loader!sass-loader'
                })
            },
            {
                test:/\.html$/,//匹配扩展名为.html的文件
                exclude:[
                    path.resolve(__dirname,'node_modules'),
                    path.resolve(__dirname,'src/lib'),
                ],
                /**
                 * html-loader使用之前先在命令行安装npm install --save-dev html-loader
                 * html-loader主要作用是用html-loader对.html文件进行处理，当然你也可以定义其他扩展名，只不过将test:/\.你的扩展名$/改成这样;
                 * 一般使用是在组件化中使用;
                **/
                loader:'html-loader'
            },
            {
                test:require.resolve('jquery'),
                exclude:[
                    path.resolve(__dirname,'node_modules'),
                    path.resolve(__dirname,'src/lib'),
                ],
                /**
                 * expose-loader使用之前先在命令行安装npm install --save-dev expose-loader
                 * expose-loader主要作用是解决第三方库的插件依赖问题，这里以jquery为例;
                **/
                loader:'expose-loader?$!expose-loader?jquery'
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,//匹配扩展名为.(png|jpe?g|gif|svg)的文件
                /**
                 * url-loader使用之前先在命令行安装npm install --save-dev url-loader
                 * 同时安装file-loader 安装方法npm install --save-dev file-loader
                **/
                loader: 'url-loader',
                options: {
                    limit: 20000,//限制大小，超过限制大小就打包成一个文件；
                    name: 'images/[name].[hash:7].[ext]'
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,//同上
                loader: 'url-loader',
                options: {
                    limit: 20000,
                    name: 'fonts/[name].[hash:7].[ext]'
                }
            }
        ]
    },
    plugins:[
        /*调用extract-text-webpack-plugin插件*/
        new ExtractTextPlugin('style/[name].min.css?v=[hash:7]'),
        new webpack.ProvidePlugin({//将jquery暴露出去
            $: 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jquery': 'jquery'
        }),
        /*调用html-webpack-plugin插件*/
        new HtmlWebpackPlugin({
            template:'index.html',//模板html
            filename:'index.min.html'//打包之后的html
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name:['vendor', 'manifest']
        }),
        new CleanWebpackPlugin(//重新打包时删除匹配到的旧文件
            ['dist'],　 //匹配删除的文件
            {
                root: __dirname,//根目录
                verbose:  true,//开启在控制台输出信息
                dry:      false//启用删除文件
            }
        )
    ]
}

webpack简单的配置就是这些了，如需了解更多点击这里

微信搜索关注公众号 【大前端js】，回复vue教程，react教程，webpack实战等等，获得不同的视频教程，大量视频教程等你来拿；阅读公众号最新一篇文章获取更多视频