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"
}
}
