webpack 零基础入门学习之路

零基础webpack的学习之路，主要是webpack 4的学习
直接进入正题
1.命令行安装

• 新建一个空目录作为我们的跟目录，取名为test

cd test 

• 执行以下命令，初始化我们的node.js项目(-y 走默认),会自动生成一个package.json文件，来管理我们的依赖包等。

npm init -y 

package.json如下：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack && webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
  },
  "dependencies": {
  }
}

• 安装webpack

npm i webpack webpack-cli -D // -D 即 -save-dev    版本4.x以上需要安装webpack-cli

到这里基本环境就搭好了

2、创建一个入口js ,取名为index.js，里面随便写点什么

3、webpack.config.js

const path = require("path");

module.exports = {
    entry: { //配置入口文件
        index: "./scripts/index.js" //，若不配置webpack4将自动查找src目录下的index.js文件
    },
    output: { //配置输出
        filename: "[name].bundle.js",//输出文件名，[name]表示入口文件js名
        path: path.join(__dirname, "dist")//输出文件路径
    },
	devServer:{ //开启服务
		open: true,
        inline:true,//打包后加入一个websocket客户端
        // 设置基本目录结构
        contentBase: path.join(__dirname, `${fileName}/build`),
        // 服务器的ip地址，也可以使用localhost
        host: "localhost",
        hot:false,//热加载
        // 服务端压缩是否开启
        compress: true,
        // 配置服务端口号
        port: 8080
	},
	plugins:{  //用户生成环境的各项模块处理
	},
	module:{ //  //css、图片、模板等
	}
}

到这里就可以根据自己的需求配置了
2.下面看主要用的依赖包

• npm i webpack-dev-server -D //开启服务，时时监听
• npm i html-webpack-plugin -D //打包html
• npm i clean-webpack-plugin -D //删除指定文件夹，不传默认删除output下面path里面文件夹的东西
• npm i extract-text-webpack-plugin //抽取到分离的 CSS 文件,指定css打包路径
• npm install style-loader css-loader --save-dev //合并css,并生成新的文件
• npm node-sass sass-loader postcss-loader -D //编译scss
• npm install url-loader file-loader --save-dev 图片处理，打包到指定文件夹下面
• npm install postcss-pxtorem -D // 处理rem换算
• npm install cross-env -D //运行跨平台设置和使用环境变量的脚本
• const childProcess = require(‘child_process’); //开启子进程
• html-webpack-plugin-before-html-processing ,不用下载， 扩展 HtmlwebpackPlugin 插入自定义的脚本:https://www.cnblogs.com/haogj/p/5649670.html
• babel 编译，es6编译
  。npm install babel-loader babel-plugin-transform-class-properties babel-plugin-transform-decorators -D
  。npm install @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-proposal-export-default-from @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react -D
• art-template模板编译
  。 npm install art-template art-template-loader -D
• react redux 编译
  npm install react react-dom react-redux react-router-dom redux redux-thunk --save
• npm install vconsole -D
• npm install babel-plugin-import -D 实现按需加载