零基础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 实现按需加载