webpack从安装到配置

安装(win10系统）

1. 下载webpack

在PowerShell/cmd中

mkdir webpack-demo && cd webpack-demo  //名字自定义
cnpm init -y          //获得package.json
cnpm install webpack webpack-cli --save-dev
 //获得node_modules文件夹

2. 创建目录文件结构

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- index.html
  |- bundle.js
|- /src
  |- index.js

3. webpack.config.js中写入

       const path = require('path');
       	module.exports = {
       	    mode:'development',
       	    entry: './src/index.js',
       	    output: {
       	        filename: 'bundle.js',
       	        path: path.resolve(__dirname, 'dist')
       	    }
       	};

index.html文件中写入

<script src="bundle.js"></script>

4. package.json中“scripts”添加

“build”:webpack

PowerShell中输入npm run build实现编译

5. 引用其他组件

在PowerShell中下载相关组件
然后在index.js中import ** from '***'

6. 使用方式

在index.js中写入相关js代码
在PowerShell中输入npm run build 实现编译
（将index.js转为bundle.js）

配置loader

引入css文件

首先

cnpm install --D style-loader css-loader postcss-loader

1.index.js中写入

import '../css/index.css'
//以此路径为例

2.写index.css文件
3.webpack.config.js中写入

module: {
	        rules: [
	            {test:/\.css$/i,
				use:['style-loader',
				'css-loader'，
				{
				      loader: "postcss-loader",
			              options:{
					plugins:[                  
					require("autoprefixer")
				                            ]
				                        }
				           }
				]
				}
	        ]
	    }

postcss-loader：给css加前缀实现浏览器兼容
autoprefixer：选择使用人数>=5%的浏览器

4.修改autoprefixer配置
在package.json中加入

"browerslist":[
	    "last 5 versions",
	    ">2%"
	//…根据需要自己添加
	  ]

引入图片、字体文件(用到bootstrap)
首先

cnpm i --D file-loader url-loader bootstrp
	//bootstrap放入到了node_modules中

1.index.js中写入

import 'bootstrap/dist/css/bootstrap.css';

2.webpack.config.js中添加

,{
                test:/\.(png|svg|jpg|jpeg|gif)$/,
                use:[
                    {
                        loader: 'url-loader',
                        options:{
                            outputPath:'/imgs',
                            publicPath:'./imgs',
                            limit:4*1024
                    }
                }]
            }
 ,{
                     test: /\.(woff|woff2|eot|ttf|otf)$/,
                     use: [
                         {
                             loader:'url-loader',
                             options:{
                                 outputPath:'/fonts',
                                 publicPath:'./fonts',
                                 limit:4*1024
                             }
                         }
                     ]
               }

3.powershell中

cnpm run build

基本loader功能总结

dev-server的使用

1.安装，powershell中

cnpm i webpack-dev-server -D

2.webpack.config.js中添加

devServer: {
        contentBase:'./dist'
    },

3.package.json中添加

"scripts": {
    "start": "webpack-dev-server"
  },

4.命令行中输入

cnpm run start

5.浏览器地址栏输入localhost