1.全局安装node
2.安装webpack
3. 新建package.json 文件 可以使用 npm init命令(为了记录依赖的文件名,和配置一些使用命令等)
4. 新建一个webpack.config.js 配置文件 放在跟package.json 同级
5. 开始编写webpack.config.js 文件
var webpack = require('webpack'), //获取webpack实例
path = require('path'), //获取nopde path模块用来后面输入路劲使用
HtmlWebpackPlugin = require('html-webpack-plugin'), //模板使用插件 就是打包的时候使用哪个html 模板
OpenBrowserPlugin = require('open-browser-webpack-plugin'), //打开浏览器插件
os = require('os'),//获取 电脑IP 插件
protNum = 8111;//端口号
var localhost = ''
//获取 ip 如果没有获取到IP就使用localhost
try {
var network = os.networkInterfaces()
localhost = network[Object.keys(network)[0]][1].address
} catch (e) {
localhost = 'localhost';
}
module.exports = { //配置文件
entry: './src/App.js',//代码入口文件
output: {
path:path.resolve(__dirname,'bulid'), //代码打包路劲
publicPath: 'http://'+localhost+':'+protNum+'/',//文件访问的地址
filename:'build.[hash].js'//打包后的文件名
},
module:{//书写加载器 进行文件的转化
rules:[
{
test:/\.less$/,//less编译配置 需要一下四个加载器
use:[//v1的loader 变成了use 不过这样写看的更清楚了
'style-loader',
'css-loader',
{loader:'postcss-loader',
options: {
plugins: function() {
return [require('autoprefixer')];
}
}
},
'less-loader'
]
},
{
test:/\.js$/,//jsx 转化成js
exclude:/node_modules/,
loader:'babel-loader',
query:{
presets:['es2015','react','stage-0'],//这个是用的的加载器配置
plugins: [["import", {"libraryName": "antd-mobile","style": true}]] //用于解析antd 这个可以不看
}
},
{
test:/\.(png|jpg|gif|svg)/,//图片配置
use:[
{
loader:'url-loader',
options: {
limit:'8000',
name: 'image/[name].[hash].[ext]'
}
}
]
}
]
},
plugins:[//插件配置
new HtmlWebpackPlugin({ //模板插件
template: './index.html',//插件使用模板
filename: 'index.html'//打包导出文件名
}),
new webpack.HotModuleReplacementPlugin(),//热跟新插件
// 打开浏览器
new OpenBrowserPlugin({
url: 'http://'+localhost+':'+protNum
}),
],
resolve:{
extensions: ['.less', '.web.js', '.js', '.json'],//使用require 或者 import导入文件时候可以不写配置
},
devServer:{//开发环境需要配置
// contentBase:path.join(__dirname,'./'),
inline: true, //线跟新
host:localhost,//ip
hot: true,//是否使用热跟新
port:protNum,//端口号
proxy: {//代理服务
"/wx": {
target: 'http://'+localhost+':8080',
}
},
},
stats: { //显示颜色
colors: true
},
devtool: 'source-map'
}
2.安装webpack
3. 新建package.json 文件 可以使用 npm init命令(为了记录依赖的文件名,和配置一些使用命令等)
4. 新建一个webpack.config.js 配置文件 放在跟package.json 同级
5. 开始编写webpack.config.js 文件
var webpack = require('webpack'), //获取webpack实例
path = require('path'), //获取nopde path模块用来后面输入路劲使用
HtmlWebpackPlugin = require('html-webpack-plugin'), //模板使用插件 就是打包的时候使用哪个html 模板
OpenBrowserPlugin = require('open-browser-webpack-plugin'), //打开浏览器插件
os = require('os'),//获取 电脑IP 插件
protNum = 8111;//端口号
var localhost = ''
//获取 ip 如果没有获取到IP就使用localhost
try {
var network = os.networkInterfaces()
localhost = network[Object.keys(network)[0]][1].address
} catch (e) {
localhost = 'localhost';
}
module.exports = { //配置文件
entry: './src/App.js',//代码入口文件
output: {
path:path.resolve(__dirname,'bulid'), //代码打包路劲
publicPath: 'http://'+localhost+':'+protNum+'/',//文件访问的地址
filename:'build.[hash].js'//打包后的文件名
},
module:{//书写加载器 进行文件的转化
rules:[
{
test:/\.less$/,//less编译配置 需要一下四个加载器
use:[//v1的loader 变成了use 不过这样写看的更清楚了
'style-loader',
'css-loader',
{loader:'postcss-loader',
options: {
plugins: function() {
return [require('autoprefixer')];
}
}
},
'less-loader'
]
},
{
test:/\.js$/,//jsx 转化成js
exclude:/node_modules/,
loader:'babel-loader',
query:{
presets:['es2015','react','stage-0'],//这个是用的的加载器配置
plugins: [["import", {"libraryName": "antd-mobile","style": true}]] //用于解析antd 这个可以不看
}
},
{
test:/\.(png|jpg|gif|svg)/,//图片配置
use:[
{
loader:'url-loader',
options: {
limit:'8000',
name: 'image/[name].[hash].[ext]'
}
}
]
}
]
},
plugins:[//插件配置
new HtmlWebpackPlugin({ //模板插件
template: './index.html',//插件使用模板
filename: 'index.html'//打包导出文件名
}),
new webpack.HotModuleReplacementPlugin(),//热跟新插件
// 打开浏览器
new OpenBrowserPlugin({
url: 'http://'+localhost+':'+protNum
}),
],
resolve:{
extensions: ['.less', '.web.js', '.js', '.json'],//使用require 或者 import导入文件时候可以不写配置
},
devServer:{//开发环境需要配置
// contentBase:path.join(__dirname,'./'),
inline: true, //线跟新
host:localhost,//ip
hot: true,//是否使用热跟新
port:protNum,//端口号
proxy: {//代理服务
"/wx": {
target: 'http://'+localhost+':8080',
}
},
},
stats: { //显示颜色
colors: true
},
devtool: 'source-map'
}