weboack 4 tutorial

首先需要创建你的项目目录，然后初始化项目

mkdir yourProject

cd yourProject

npm init (如果想直接跳过问答式使用npm init -y)

---

安装webpack和wepack-cli脚手架

npm i webpack --save-dev

npm i webpack-cli --save-dev

---

创建你的js文件 在src目录下，因为默认webpack会去src目录下面找index.js

touch index.js

console.log(123);

然后在package.json的脚本配置项中配置

"scripts": {
  "build": "webpack"
}

---

运行项目

npm run build 

运行之后就会默认生成一个dist文件夹，里面有着打包压缩好的js

如果没有配置mode的话，会默认提示出来

新版本的webpack 可以直接在package.json中配置开发模式和生产模式

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

---

新版的webpack可以在package.json文件中配置入口文件和出口文件
可以直接覆盖webpack.config.js配置好的入口出口文件

    "dev": "webpack --mode development ./src/index.js --output ./src/main.js",

---

编译js

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

然后创建.babelrc文件 在window下创建这个鬼东西，需要.babelrc.

{
    "presets": [
        "@babel/preset-env"
    ]
}

在wbepack.config,.js配置文件中

module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

---

html 插件

npm i html-webpack-plugin html-loader --save-dev

然后在webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

---

css 插件

npm i mini-css-extract-plugin css-loader --save-dev 


const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

在js中导入css
//
// PATH OF THIS FILE: ./src/index.js
//
import style from "./main.css";

Additional:

---

webpack server

npm i webpack-dev-server --save-dev

然后在package..json中配置
"scripts": {
  "start": "webpack-dev-server --mode development --open",
  "build": "webpack --mode production"
}

npm run start

如果不想默认使用index.js，可以去配置入口文件

module.exports={
	entry: {
	     a: './src/a.js'
	   },
	module:{
		rules:[

That is all ! thanks
Reference:https://www.valentinog.com/blog/webpack-tutorial/

---

补充，上次的配置没有配置解析sass语法的

npm install node-sass sass-loader --save-dev

然后修改一下webpack.config.js文件中的
{
				test:/.scss$/,
				use:['style-loader',MiniCssExtractPlugin.loader,"css-loader",'sass-loader']
			}

注意顺序！！！！

---

还有我们会使用生成hash值得文件，避免缓存问题

const path = require('path');
const WebpackMd5Hash = require('webpack-md5-hash');

	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'[name].[chunkhash].js'
	},

new MiniCssExtractPlugin({
			// filename:'[name].css',
			filename:'style.[contenthash].css',
			chunkFilename:"[id].css"
		}),


new WebpackMd5Hash()

---

每当我们重新build的时候，之前生成的文件不会被删除，所以我们需要重新引入一个插件来达到删除

const CleanWebpackPlugin = require('clean-webpack-plugin');


		new CleanWebpackPlugin('dist',{}),

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports={
	entry: {
	     bigScreen: './src/js/bigScreen.js'
	   },
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'[name].[chunkhash].js'
	},
	module:{
		rules:[
			{
				test:/.js$/,
				exclude:/node_modules/,
				use:{
					loader:"babel-loader"
				}
			},
			{
				test:/.html$/,
				use:[
					{
						loader:'html-loader',
						options:{minimize:true}
					}
				]
			},
			{
				test:/.scss$/,
				use:['style-loader',MiniCssExtractPlugin.loader,"css-loader",'sass-loader']
			}
		]
	},
	plugins:[
		new CleanWebpackPlugin('dist',{}),
		new HtmlWebPackPlugin({
			template:"./src/html/bigScreen.html",
			filename:'./index.html'
		}),
		new MiniCssExtractPlugin({
			// filename:'[name].css',
			filename:'style.[contenthash].css',
			chunkFilename:"[id].css"
		}),
		new WebpackMd5Hash()
	]
}

---

{
  "name": "tqcode",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server --mode development --open",
    "dev": "webpack --mode development ./src/index.js --output ./src/main.js",
    "build": "webpack --mode production"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/cyany/TqCode.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/cyany/TqCode/issues"
  },
  "homepage": "https://github.com/cyany/TqCode#readme",
  "devDependencies": {
    "@babel/core": "^7.1.5",
    "@babel/preset-env": "^7.1.5",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.1",
    "mini-css-extract-plugin": "^0.4.4",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack-md5-hash": "0.0.6"
  }
}