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实战等等，获得不同的视频教程，大量视频教程等你来拿；阅读公众号最新一篇文章获取更多视频