webpack3.0 环境搭建
2024-09-03 18:03:12
额、备份一下总是好的
#为了避免某些国外镜像源安装失败，先设置淘宝镜像代理
yarn config set registry https://registry.npm.taobao.org # 初始化yarn
yarn init -y # 添加webpack
yarn add webpack # 添加webpack插件
yarn add html-webpack-plugin
yarn add webpack-dev-server
yarn add extract-text-webpack-plugin # 添加webpack-loader
yarn add style-loader css-loader node-sass sass-loader
yarn add url-loader
yarn add file-loader
yarn add postcss-loader autoprefixer # 添加babel插件
yarn add babel-preset-react
yarn add babel-loader babel-core # react相关
yarn add react react-dom
yarn add react-router react-router-dom
yarn add redux redux-thunk redux-saga react-redux
yarn add react-router-redux@next history # 蚂蚁金服的UI框架：Ant Design
yarn add antd # 添加第三方库
yarn add axios
配置webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const autoprefixer = require('autoprefixer')
module.exports = {
entry: {
main: __dirname + '/src/main.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'assets/js/[name].js'
},
devtool: 'source-map',
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
minetype: 'application/font-woff',
},
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
minetype: 'application/font-woff',
},
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
minetype: 'application/octet-stream',
},
},
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
minetype: 'application/vnd.ms-fontobject',
},
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
minetype: 'image/svg+xml',
},
},
{
test: /\.(png|jpg|jpeg|gif)(\?v=\d+\.\d+\.\d+)?$/i,
loader: 'url-loader',
options: {
limit: 10000,
},
},
{
test: /\.(scss|sass|css)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: () => [autoprefixer({ browsers: ['iOS >= 7', 'Android >= 4.1'] })],
},
},
{
loader: 'sass-loader',
query: {
sourceMap: true
}
}
]
})
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'my title',
filename: __dirname + '/dist/index.html',
template: __dirname + '/index.html',
chunks: ['main']
}),
new ExtractTextPlugin('assets/css/[name].css')
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
}
配置.babelrc
{
"presets": ["react"],
"plugins": [
["import", { "libraryName": "antd", "style": "css" }]
]
}
配置package.json，加入scripts
{
...
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
}
}
最新文章
- MVC 文件上传问题
- Java实现深克隆的两种方式
- java对象转JSON JS取JSON数据
- c++、c实现推箱子小游戏
- windows server 2003 AD
- Spring第三天
- javascript入门知识点总结(一)
- html下载excel模板
- 硬盘安装Kali
- Javascript 中的数据类型判断
- Android Stdio的问题
- Human Motion Analysis with Wearable Inertial Sensors——阅读3
- STM32——C语言知识点：指针、结构体
- 转载：VOC2007数据集制作
- MFC中onmouseover与onmousemove的区别
- 【FastJSON】使用JSON.toJSONString()-解决FastJson中“$ref 循环引用”的问题
- ASP.Net Core 2.2 MVC入门到基本使用系列 (三)
- Tomcat性能调优及JVM内存工作原理
- R语言中两个数组(或向量)的外积怎样计算
- wamp如何设置数据库的密码