标签：npm 插件 webpack4 babel 流程 笔记 loader webpack css
PS：其实学习webpack4最快的方法就是跟着官网敲一遍，博主就是跟着敲了一遍之后才真正开始入门webpack4的！！
ES6暴露写法
import _ from 'lodash';
import './style.css';
初始化
mkdir webpack-demo
cd webpack-demo
- 第一步 npm init -y
- 第二步 npm install webpack webpack-cli --save-dev
加载资源
- CSS: npm install --save-dev style-loader css-loader
- 图片: npm install --save-dev file-loader
- 数据: npm install --save-dev csv-loader xml-loader
- ES6解析: npm install -D babel-loader @babel/core @babel/preset-env
第三步 npm i -D style-loader css-loader file-loader csv-loader xml-loader babel-loader @babel/core @babel/preset-env
目前为止学习的所有插件:
@babel/core @babel/preset-env autoprefixer babel-loader css-loader file-loader html-webpack-plugin mini-css-extract-plugin postcss-loader style-loader webpack webpack-cli webpack-dev-server
下载本地服务器
- npm i webpack-dev-server -D
进入监视模式: webpack --watch
- 进入监视模式之后不需要再次输入 npm run build 保存文件自动刷新页面
server的命令
- 在浏览器打开: webpack-dev-server --open
改变端口号: webpack-dev-server --open --port 3000
直接打开html: webpack-dev-server --open --port 8080 --contentBase src
server的配置
devServer: { // 开发服务器的配置
port: 3000, // 端口号
progress: true, //
contentBase: './dist', // 打开的文件路径
open: true // 是否打开
},
分离css的插件
- 插件: npm i -D html-webpack-plugin
- new MiniCssExtractPlugin({
filename: 'main.css'
}) - use里配置: MiniCssExtractPlugin.loader
自动添加CSS3前缀的插件
- 插件: npm i -D postcss-loader autoprefixer
- 然后配置一个 postcss.config.js 的文件
- module.exports = {
plugins: [require('autoprefixer')]
}
压缩CSS的插件
- 插件: npm -D optimize-css-assets-webpack-plugin;
- const optimizeCss = require('optimize-css-assets-webpack-plugin');
-
optimization: { // 优化项 minimizer: [ new optimizeCss() ] },
压缩JS的插件
- 插件: npm -D uglifyjs-webpack-plugin;
- const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-
new UglifyJsPlugin({ // 压缩JS cache: true, // 是否缓存 parallel: true, // 是否压缩多个 sourceMap: true // es6的源码映射 }),
解析ES6的插件
- 插件: npm install -D babel-loader @babel/core @babel/preset-env
- 插件2(解析更高级的语法ES7): npm i -D @babel/plugin-proposal-class-properties
- 插件3: npm i -D @babel/plugin-transform-runtime 依赖: @babel/runtime -save
-
{ test: /.js$/, use: { loader: 'babel-loader', options: { // babel-loader 把es6转换成es5 presets: [ '@babel/preset-env' ] } } },
babel-loader: 解析es6的loader
@babel/core: 模块
@babel/preset-env: 把高级语法转换成es5的插件
JS代码效验插件
插件: npm i eslint eslint-loader -D
解析less
{
test: /.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'less-loader'
]
}
设置HtmlWebpackPlugin
- 插件: npm install --save-dev html-webpack-plugin
-
new HtmlWebpackPlugin({ template: './src/index.html', filename: 'index.html', minify: { removeAttributeQuotes: true, // 删除index里的双引号 collapseWhitespace: true, // 折叠空行 变成一行 }, // hash: true // 哈希戳 }),
webpack.config.js配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 分离css的插件
module.exports = {
mode: 'development', // 模式 默认两种 production-生产 development-开发
entry: { // 入口
index: './src/index.js'
},
devtool: 'inline-source-map', // 报错源
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
},
{
test: /\.js$/, // normal 普通的
use: {
loader: 'babel-loader',
options: { // babel-loader 把es6转换成es5
presets: ['@babel/preset-env']
}
},
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: 'file-loader',
options: {
outputPath: '../imgs/'
}
}
},
{ test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] }
]
},
plugins: [
new HtmlWebpackPlugin({ // 创建新的html
template: './src/index.html',
filename: 'index.html'
}),
new MiniCssExtractPlugin({
filename: './css/main.css'
})
],
devServer: { // 打开浏览器
contentBase: './dist',
open: true,
port: 3000,
inline: true
},
output: { // 出口
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
package.json scripts配置
"build": "webpack",
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
"server": "node server.js"
设置HtmlWebpackPlugin
- 插件: npm install --save-dev html-webpack-plugin
- 蓝文件夹:
const HtmlWebpackPlugin = require('html-webpack-plugin'); plugins: [ new HtmlWebpackPlugin({ title: 'Output Management' }) ],
清理/dist文件夹
npm install --save-dev clean-webpack-plugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
new CleanWebpackPlugin(),
标签：npm,插件,webpack4,babel,流程,笔记,loader,webpack,css 来源： https://www.cnblogs.com/lijieqiqi/p/qiqipak.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。