《Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程》 和 《零基础学习 Vue3 教程 2021 年最新教程 免费视频教程》 正在更新
世界上最伟大的投资就是投资自己的教育
https://github.com/webpack-contrib/file-loader
https://github.com/webpack-contrib/url-loader
src/App.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import logo from './logo.png';
const App = () => {
return (
<div>
<p>React here! Hello, rails365</p>
<img src={ logo } width={ 300 } />
<div className="image"></div>
</div>
)
}
export default App;
ReactDOM.render(<App />, document.getElementById("app"));
src/index.css
body {
line-height: 2;
color: blue;
}
div.image {
height: 600px;
background: url("./logo.png") no-repeat;
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const devMode = process.env.NODE_ENV !== 'production';
let pathsToClean = [
'dist'
]
module.exports = {
// entry: "./src/index.js",
entry: {
// app: ["@babel/polyfill", './src/index.js'],
app: './src/index.js',
hello: './src/hello.js'
},
devtool: false,
output: {
path: path.resolve(__dirname, 'dist'),
filename: "js/[name]-[hash].bundle.js"
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
// options: {
// presets: [['@babel/preset-env', { "debug": true }]],
// plugins: [["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }]]
// }
// options: {
// plugins: [require('@babel/plugin-transform-arrow-functions')]
// }
}
},
{
test: /\.css$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.(scss|sass)$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader, // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.less$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader, // creates style nodes from JS strings
'css-loader', // translates CSS into CommonJS
'less-loader' // compiles Less to CSS
]
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/'
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Admin',
filename: 'admin.html',
template: 'public/index.html',
chunks: ["hello"]
}),
new HtmlWebpackPlugin({
title: 'Index',
filename: 'index.html',
template: 'public/index.html',
chunks: ["app"]
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
}),
new CleanWebpackPlugin(pathsToClean)
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
mode: 'development'
}
1Free轻松学 Webpack 4 免费视频教程 #1 课程介绍
2Free轻松学 Webpack 4 免费视频教程 #2 安装
3Free轻松学 Webpack 4 免费视频教程 #3 zero config
4Free轻松学 Webpack 4 免费视频教程 #4 Mode
5Free轻松学 Webpack 4 免费视频教程 #5 搭建项目
6Free轻松学 Webpack 4 免费视频教程 #6 用 npx 来解决全局安装的问题
7Free轻松学 Webpack 4 免费视频教程 #7 配置文件 Webpack.config.js
8Free轻松学 Webpack 4 免费视频教程 #8 配置多入口文件 Entry Points
9Free轻松学 Webpack 4 免费视频教程 #9 什么是 Babel
10Free轻松学 Webpack 4 免费视频教程 #10 babel-loader 的介绍与安装
11Free轻松学 Webpack 4 免费视频教程 #11 Babel Plugins - plugin-transform-arrow-functions
12Free轻松学 Webpack 4 免费视频教程 #12 Babel Plugins - 更多的插件
13Free轻松学 Webpack 4 免费视频教程 #13 Babel Presets - @babel/preset-env
14Free轻松学 Webpack 4 免费视频教程 #14 devtool false 让编译后的代码可读性强一些
15Free轻松学 Webpack 4 免费视频教程 #15 @babel/polyfill 的那些事儿 part 1
16Free轻松学 Webpack 4 免费视频教程 #16 @babel/polyfill 的那些事儿 part 2 - 原理及如何解决
17Free轻松学 Webpack 4 免费视频教程 #17 @babel/polyfill 的那些事儿 part 3 - preset-env 的选项和按须编译
18Free轻松学 Webpack 4 免费视频教程 #18 @babel/runtime
19Free轻松学 Webpack 4 免费视频教程 #19 @babel/plugin-transform-runtime 是如何工作的
20Free轻松学 Webpack 4 免费视频教程 #20 打造 React 开发环境
21Free轻松学 Webpack 4 免费视频教程 #21 使用第一个 Webpack 插件 html-Webpack-plugin
22Free轻松学 Webpack 4 免费视频教程 #22 配置多个单页面应用
23Free轻松学 Webpack 4 免费视频教程 #23 使用 loader 来处理 CSS
24Free轻松学 Webpack 4 免费视频教程 #24 使用 loader 来处理 Sass 和 Less 文件
25Free轻松学 Webpack 4 免费视频教程 #25 用 mini-css-extract-plugin 把 CSS 分离成文件
26Free轻松学 Webpack 4 免费视频教程 #26 启动服务器并实时刷新 Webpack-dev-server
27Free轻松学 Webpack 4 免费视频教程 #27 用 clean-Webpack-plugin 来清除文件
Free轻松学 Webpack 4 免费视频教程 #28 如何打包图片(包含规划编译出的文件的目录结构)
29Free轻松学 Webpack 4 免费视频教程 #29 如何压缩图片
30Free轻松学 Webpack 4 免费视频教程 #30 构建开发和生产环境 - 分离配置文件
31Free轻松学 Webpack 4 免费视频教程 #31 显示打包进度条
32Free轻松学 Webpack 4 免费视频教程 #32 调整配置 - 在浏览器显示 DevServer 的 编译错误的信息
33Free轻松学 Webpack 4 免费视频教程 #33 devtool 和 source map 深入解析
34Free轻松学 Webpack 4 免费视频教程 #34 解决开发环境和生产环境打包不一致的情况
35Free轻松学 Webpack 4 免费视频教程 #35 打包优化 - 深入探索 mode、Optimization、terser-Webpack-plugin、UglifyjsWebpackPlugin
© 汕尾市求知科技有限公司 | 关注我们 | 专业版网站 | 在线学员:1118
粤公网安备 44152102000088号 | 粤ICP备19038915号