webpack4.x项目的创建

1.运行npm init -y快速初始化项目

2.在项目根目录下创建src源代码目录和dist产品目录

3.在src目录下创建index.html

4.使用cnpm安装webpack，运行cnpm i webpack webpack-cli -D（全局运行npm i cnpm -g）

5.创建webpack.config.js文件，

//向外暴露一个打包的配置对象，因为webpack是基于node构建的，所以webpack支持所有node API和语法

module.exports={

    mode: 'development',        //开发环境          （production产品环境，要打包发布了）

    //webpack4.x有一个很大的特性，就是约定大于配置，默认的打包入口路径是src 下面的index.js，不用写entry

}

 

//cnpm i webpack-dev-server -D //配置实时编译

在 package.jason中

“scripts”：{

     “dev”：“ webpack-dev-server  --open firefox --port 3000 --hot --host 127.0.0.1 ”     //运行npm run dev

}

在index.html中

<script src='/main.js'></script>    //这个main.js存储在内存之中

 

//cnpm i html-webpack-plugin -D  //把页面生成到内存之中去

在webpack.config.js中配置

const path = require（‘path’）

const HtmlWebPackPlugin = require（‘html-webpack-plugin’）//导入在内存中自动生成index页面的插件

//创建一个插件实例对象

const htmlPlugin = new HtmlWebPackPlugin（{

     template： path.join(_dirname,'./src/index.html'),     //源文件

     filename：‘index.html’   //生成内存中的首页名称

}）

module.exports={

    mode: 'development',        //开发环境          （production产品环境，要打包发布了）

    //webpack4.x有一个很大的特性，就是约定大于配置，默认的打包入口路径是src 下面的index.js，不用写entry

    plugins: [

         htmlPlugin

    ]

}

在index.html中

<script src='/main.js'></script>    //这个main.js存储在内存之中

这句话就可以注释掉了

 

配置babel：

安装babel插件：

运行 cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

运行 cnpm i babel-preset-env babel-preset-stage-0 -D

安装能够识别转换jsx语法的包babel-preset-react -D

添加.babelrc配置文件

{

    “presets”：["presets":["env","stage-0"，"react”]，

    “plugins”：["transform-runtime"]

}

添加babel-loader的配置项

module：{   //要打包的第三方模块

     rules：[

         {test: /\.js|jsx$/},use: 'babel-loader',exclude:/node_modules/}

     ]

}

 

 

 

export default{}        //es6语法

import .. from '/......'   //es6语法，node不支持，webpack自然也不支持