【前端工程化】最详细的webpack基本环境搭建

前提：配置好nodejs环境

webpack基本环境搭建步骤

第一步：初始化package.json

$ npm init -y(-y 的含义：yes的意思，在init的时候省去了敲回车的步骤)

第二步：安装webpack及相关插件并配置到开发环境，-D开发环境 -S生产环境

$ npm install webpack webpack-cli html-webpack-plugin webpack-dev-server -D

第三步：新建src文件夹，然后在src里创建入口文件index.js

第四步：在项目根目录创建默认配置文件：webpack.config.js

const path = require('path') //2 引入path模块
const HtmlWebpackPlugin = require('html-webpack-plugin') //5 引入html-webpack-plugin插件

module.exports = {
  mode: 'development', //1 开发模式，生产模式：production 
  entry: path.join(__dirname,'src','index.js'), // 3
  output: { // 4 打包后出口文件及文件路径
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  plugins: [ //6 配置插件
    new HtmlWebpackPlugin({
      template: path.join(__dirname,'src','index.html'), //找到已有的index.html
      filename: 'index.html' //产出文件名
    })
  ],
  devServer: { // 7.启动本地服务
    port: 3000,
    contentBase: path.join(__dirname, 'dist') //当前目录
  }
}

第五步：最后在package.json的script中加入，打包命令和运行命令

{
  "name": "webpack-dome",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",  // 打包
    "dev": "webpack-dev-server" //运行
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^4.0.4",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

npm run build即可对当前项目进行打包
npm run dev即可运行

标题使用babel支持es高级语法转译

【第一步】安装babel

npm i @babel/core @babel/preset-env babel-loader

• @babel/core(babel核心文件)
• @babel/preset-env(babel配置文件)
• babel-loader(提供给webpack应用的插件)

【第二步】项目根目录下创建babel配置文件.babelr

{
  "presets": ["@babel/preset-env"] //babel很多配置插件的集合
}

【第三步】修改webpack.config.js

 module: { // 7 针对不同模块做不同解析
    rules: [
      {
        test: /\.js$/,
        loader: ['babel-loader'], //知识babel提供给webpack的一个插件，真正做转译工作的是@babel/core,所以需要.babelrc配置
        include: path.join(__dirname, 'src'),//哪些文件需要转译
        exclude: /node_modules/ //不需要转译
      }
    ]
  }

ts配置

安装依赖

$ npm i typescript -g
$ npm install -D  ts-node

生成配置文件

$ tsc --init

修改 webpack.config.js

 module: { // 7 针对不同模块做不同解析
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        include: [resolve('src')]
      }
    ]
  }

好了，基本的webpack+nodejs搭建完成！