webpack初识

webpack是什么？

webpack是前端的一个项目构建工具，他是基于node.js开发出来的前端工具

webpack能做什么？

可以完美实现资源的合并，打包，压缩，等诸多功能

webpack的安装方式

1. 全局安装
   • npm install webpack -g
2. 局部安装(安装到项目中)
   • npm install webpack --save-dev

自动打包工具(webpack-dev-server)

可以帮助我们打包编译并且自动刷新浏览器
cnpm install webpack-dev-server -D
修改package.json中的代码如下：
第一种配置方法

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 contentBase src --hot"
  },

第二种配置方法

devServer:{
        open:true,//自动打开页面
        port:3003,//运行在3003端口，如果不写默认在8080
        contentBase:'src',//默认打开src下的index.html文件
        hot:true//第一步
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin()//第二步：配合hot:true使用，开启热加载
    ]

使用npm run dev运行程序

在内存中生成html页面的插件（html-webpack-plugin）

cnpm install html-webpack-plugin -D

1. 自动在内存中根据指定页面自动生成一个内存的页面
2. 自动把打包好的bundle.js以html的形式追加到页面中去
   使用：

const htmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname + '/src/index.html'),
            filename:'index.html'
        })
    ]

处理css,less,scss,url文件

注意：webpack要处理css文件需要安装两个loader(style-loader css-loader)
cnpm install style-loader css-loader --D
注意：webpack要处理less文件需要安装(less-loader less)
cnpm install less-loader less --D
注意：webpack要处理scss文件需要安装(sass-loader node-sass)
cnpm install sass-loader node-sass --D
注意：webpack要处理scss文件需要安装(url-loader file-loader)
cnpm install url-loader file-loader --D
配置webpack.config.js

module:{//用于配置所有的第三方模块加载器
        rules:[//存放所有第三方文件的匹配和处理规则
            {test:/\.css/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.(jpg|png|jpeg|gif|bmp)$/,use:['url-loader?limit=1000000']},//如果给定的值大于或等于大图片的大小会转化成base64的图片否则不会转换成base64
        ]
}

• 注意 webpack 处理第三方文件的过程

• 发现这个要处理的文件不是js文件，就去配置文件中，查找有没有对应的第三方loader规则，
• 如果能找到对应的规则，就会调用对应的loader处理这种文件类型
• 在调用loader是从右到左调用的
• 最后的一个loader调用完毕，会把处理的结果，直接交给webpack进行打包处理，最终输出到bundle.js中去。

webpack中的babel的配置

通过babel，可以帮我们将高级语法转换为低级语法

1. 安装：

npm install babel-loader babel-core babel-plugin-transform-runtime -D

npm install babel-preset-env babel-preset-stage-0 -D

2. 打开webpack的配置文件，在module节点下的rules数组中，添加一个新的匹配规则：

module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader'
            },
            exclude: '/node_modules/'
        }
    ]
}

注：在配置babel的loader规则的时候，必须把node_modules目录通过exclude选项排除掉，如果不排除，第一是打包的时候非常消耗CPU，打包速度慢。第二是即使把node_modules中JS转换完毕，项目也无法正常运行

3. 在项目根目录中，新建一个叫做.babelrc的Babel配置文件，这个配置文件，属于JSON格式，所以，在写.babelrc配置的时候，必须符合JSON语法规范。

{
    "presets": ["env","stage-0"],
    "plugins": ["transform-runtime"]
}