webpack的安装以及配置

webpack是一个打包器。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

一、搭建环境以及配置
1、安装
全局安装webpack

sudo npm install webpack webpack-cli webpack-dev-server -g

2、创建文件夹
先创建webpack_demo

mkdir webpack_demo

再在文件夹webpack_demo下创建src dist config

mkdir src dist config

3、初始化一个空的本地仓库(如果没有可以不用)
方便后期将代码传到github上

git init .

4、初始化package.json文件

npm init -y

5、给dist和src分别创建文件index.html和index.js（这步可以步操作，只为为了说明一下下面第六步测试,之后删除）

以上基本框架就已经有了
6、测试一下
开发环境打包

webpack --mode=development 

生产环境打包

webpack --mode=production 

开发环境的包会比生产环境的包大，因为生产环境需要什么就打什么包，不用的不会打包进去。（webpack独有的）

7、在config下创建webpack.dev.js

touch config/webpack.dev.js

8、设置入口出口以及开发环境

const path =require('path')
module.exprots = {
    entry: {//入口 有可以并且有多个
        main: './src/main.js' //入口文件 如果是单个入口
        // main:[ './src/main.js' , './src/main1.js' ]  如果是多入口文件
    },
    mode: '', //打包环境：开发环境和生产环境
    output: {//出口 有且只有一个
        filename:'[name]-bundle.js' , //出口文件
        path:path.resolve(__dirname,'../dist') //文件路径
    } 
}

此时执行 webpack --config=config/webpack.dev.js会报错，因为没有设置打包环境，打包环境必须要有一个。

const path =require('path')
module.exports = {
    entry: {//入口 有可以并且有多个
        main: ['./src/main.js'] //入口文件 如果是单个入口
        // main:[ './src/main.js' , './src/main1.js' ]  如果是多入口文件
    },
    mode: 'development', //打包环境：开发环境和生产环境
    output: {//出口 有且只有一个
        filename:'[name]-bundle.js' , //出口文件
        path:path.resolve(__dirname,'../dist') //文件路径
    } 
}

此时打包成功

在dist文件下生成一个main-bundel.js文件

测试启动程序
在dist的index.html下增加代码测试，main.js中加个alert弹窗

webpack-dev-server --config=config/webpack.dev.js

测试结果：页面如下

此时点击dist会出现
9、配置本地服务器

//配置本地服务器
devServer:{ 
    contentBase:'dist', //到dist文件下启动
}

此时启动就可以正常访问了

二、加载css以及配置pack.json
1、css样式加载
src下新建样式

此时会报错，要安装css-loader和style-loder(因为webpack只认识js其他语法都无法识别，如果不引入这两个样式加载器，就会报错 )

npm install style-loader css-loader

然后在webpack的module里面配置这两个loader

module:{   //module里面配置加载器 
    rules:[{   
        test: /\.css$/, //加载css
        use:[
           { loader:'style-loader'},
           {loader:'css-loader'}
        ]
    },]
}

重启项目
此时结果

2、配置pack.json
修改scripts，设置启动和打包命令

  "scripts": {
    "start": "webpack-dev-server --config=config/webpack.dev.js",
    "bulid":"webpack --config=config/webpack.dev.js"
  },

此时启动项目，启动命令就可以直接用

npm start

打包命令用

npm bulid

三、配置html和image
1、html
在src下新建一个html文件，直接启动仍然会报错。与之前加载css原理一样，需要先加载loader。原因是webpack无法识别html。

需要先安装以下几个关于加载html的loader

npm install html-loader extract-loader file-loader 

webpack中配置

   //配置html的loader
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'file-loader', //3、给当前加载文件起名
                        options: {
                            name: '[name].html'   //此时就是index.html
                        }
                    },
                    { loader: 'extract-loader', }, //2、将index.html与bundle.js区分（分离）
                    { loader: 'html-loader', }   //顺序1、找到html文件
                ]
            },

2、配置image loader

   //配置image的loader
        {
            test: /\.(jpg|png)$/,
            use: [
                {
                    loader: 'file-loader', //3、给当前加载文件起名
                    options: {
                        name: 'image/[name].[ext]'
                        // name: 'image/[name]-[hash:8].[ext]'   //名称后面加8为hash值
                    }
                },
            ]
        },

四、babel转换
安装插件

npm install babel-core

npm install babel-plugin-transform-es2015-arrow-functions

根目录下新建.babelrc文件，添加插件信息
{
“plugins”:[
“transform-es2015-arrow-functions”
]
}
全局安装插件

sudo npm install -g babel-cli

安装 babel-loader
npm install babel-loader

官网：https://webpack.docschina.org/concepts/