webpack基本配置
Posted 大前端js
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack基本配置相关的知识，希望对你有一定的参考价值。
这里假定你的电脑上已经全局安装了 node.js、npm、cnpm、webpack如果没有安装或者不会的请自行百度一下，网上有很多教程；这里就不在赘述；
步骤：
1、首先在你存放项目的位置新建一个文件夹，文件名暂时假定为webpackdemo;
2、打开命令行工具，进入到刚刚新建的文件夹中，最简单的操作就是点开文件夹 摁住 shift 后点击鼠标右键 其中会有一个[在此处打开命令窗口(w)]，点击即可进入命令行工具到此文件夹路径中；
3、在命令行输入 npm init；之后会出现如下界面；
接下来，只要一直点击Enter键就行了，之后会在webpackdemo内自动创建一个package.json文件，这里先不管这个文件；
4、继续在命令行输入: npm install webpack –save-dev 安装完了之后将会在demo文件夹内生成node_modules文件夹，这里不用去管他，这里面都是一些依赖包；
5、在webpackdemo文件夹下新建一个webpack.config.js的js文件，文件名唯一且固定；我们之后所有的配置都在这个js文件中；
6、在webpackdemo文件下新建dist、src两个文件夹和一个index.html，dist文件夹主要用来存放webpack打包之后的文件，src主要来存放项目所需要的一些资源和你的代码；index.html就是你的页面，当然这三个文件的名字并不一定如此；
7、用编辑器打开demo文件,然后打开webpack.config.js文件；（这里编辑器推荐使用atom、sublime、webstrom）；
8、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'),
/**打包文件的名字;这里前面的js
* 主要作用是为了使打包的js文件单独存放在一个文件夹下，
* 名字可自定义
**/ filename: 'js/[name].min.js?v=[hash:7]'
}, 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简单的配置就是这些了，今天到这里就结束了
以上是关于webpack基本配置的主要内容，如果未能解决你的问题，请参考以下文章