入门webpack，帮助你更好的理解

为什么要使用webpack

为了让js更简单的编写我们引入了es6,模块化，甚至typescript，为了让css更好的编写我们引入了less/scss等等，js是变得越来越华丽了，但是浏览器不识别这些东西呀，很尴尬，所以就需要引入我们今天的主角

webapck

webpack说简单一点其实就是把那些扩展的东西统统转化为浏览器识别的东西，接下来让我们试试webpack的效果

首先

npm init

packjson.json中如下配置

  "scripts": {
    "start": "webpack-dev-server --open --hot --inline"
  },

open是打开页面
hot是热更新

安装组件

//安装到你的项目目录
npm install --save-dev webpack  webpack-cli webpack-dev-server path html-webpack-plugin

webpack是必须有的
webpack-cli是webpack4以后必须有的
webpack-dev-server是建立本地服务器
path是路径组件
html-webpack-plugin是建立html文件

新建src文件夹，在里面新建index.js文件夹，并新建index.html文件夹（此处的html是html-webpack-plugin的模板）

新建webpack.config.js文件，并粘贴以下代码

来一个简单的webpack

var path=require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
   entry:"./src/index.js",
    output:{
       filename:'build.js',
        path:path.resolve("./dist")
    },
    module:{
        rules: [{
            test: /\.js$/,
            loader: "babel-loader",
            exclude:/node_modules/,
        }]
    },
    devServer:{
       contentBase:'./public',
        port:8080,
        open:true,
        hot:true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:"./src/index.html",//new 一个这个插件的实例，并传入相关的参数
            filename:'index.html'
        })
    ]

}

加入loader之后

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
npm install --save-dev style-loader css-loader
npm install --save-dev postcss-loader autoprefixer