核心提示：目标首先可以实现开发环境，保存代码自动更新 其次，可以将代码进行压缩打包代码地址本人将代码打包上传到了云上面一份，详见地址点我实现我们需要搭建一个webpack环境，没有node的自行百度安装，然后用...
目标
首先可以实现开发环境，保存代码自动更新 其次，可以将代码进行压缩打包代码地址
本人将代码打包上传到了云上面一份，详见地址点我
实现
我们需要搭建一个webpack环境，没有node的自行百度安装，然后用npm安装webpack，全局安装：
npm i webpack -g
package.json文件内容
然后再一个文件夹内创建一个package.json文件，里面的内容为
{
"name": "cli",
"version": "1.0.0",
"description": "个人搭建的es6开发环境",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --config build/webpack.config.dev.js",
"build": "webpack --config build/webpack.config.prod.js"
},
"keywords": [],
"author": "nan",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.5",
"autoprefixer-loader": "^3.2.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"less": "^3.0.0-alpha.3",
"less-loader": "^4.0.5",
"postcss-loader": "^2.0.8",
"style-loader": "^0.19.0",
"uglifyjs-webpack-plugin": "^1.0.1",
"url-loader": "^0.6.2",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
},
"dependencies": {}
}
目录结构
然后创建文件目录，如：
说明：
- app -源代码目录
- main.js -webpack的读取文件的主入口
- source -存放需要webpack处理的文件和代码
- build -webpack配置文件
- node_modules -node模块安装目录
- public -打包时，默认将文件生成到public目录
- .babelrc -babel的配置文件
- package.json -node配置文件
- pZ喎?/kf/ware/vc/" target="_blank" class="keylink">vc3Rjc3MuY29uZmlnLmpzIC1wb3N0Y3NzvObI3cXk1sPOxLz+PC9wPg0KPGgxIGlkPQ=="代码">代码
build目录代码
config.js 相关配置项
const path = require('path');
module.exports = {
//设置唯一的入口文件
mainjs: "./app/main.js",
//服务开启的根目录
server: "./public",
//打包后输出的文件夹
path: path.resolve(__dirname, "../public"),
//输出的js文件的文件路径
jsPath:"js/index.js",
//输出的css文件的文件路径
cssPath:"css/index.css",
//输出的图片等文件的路径配置
filePath:"./images/[name].[hash:7].[ext]",
//设置文件转换成base64格式的大小
limit:10000
};
webpack.config.dev.js 开发环境webpack处理的文件
const config = require("./config");
module.exports = {
entry: config.mainJs, //已多次提及的唯一入口文件
output: {
path: config.path, //打包后的文件存放的地方
filename: config.jsPath //打包后输出文件的文件名
},
//以下是服务环境配置
devServer: {
contentBase: config.server,//本地服务器所加载的页面所在的目录
inline: true//实时刷新
},
module: {
rules:[
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use:[
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: 'postcss-loader'
}
]
},
{
test: /\.less$/,
use:[
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: 'postcss-loader'
},
{
loader: "less-loader"
}
]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: {
loader: 'url-loader',
options: {
limit: config.limit,
name: config.filePath
}
}
},
{
test: /\.(eot|woff|ttf|woff2)(\?|$)/,
use: {
loader: 'file-loader',
options: {
limit: config.limit,
name: config.filePath
}
}
}
]
}
};
webpack.config.prod.js 打包生成环境代码的文件
const webpack = require("webpack");
const config = require("./config");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: config.mainJs, //已多次提及的唯一入口文件
output: {
path: config.path, //打包后的文件存放的地方
filename: config.jsPath //打包后输出文件的文件名
},
module: {
rules:[
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options:{
presets: ['es2015']
}
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use:[
{
loader: "css-loader"
},
{
loader: 'postcss-loader'
}
]
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use:[
{
loader: "css-loader"
},
{
loader: 'postcss-loader'
},
{
loader: "less-loader"
}
]
})
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: {
loader: 'url-loader',
options: {
limit: config.limit,
name: config.filePath
}
}
},
{
test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,
use: {
loader: 'file-loader',
options: {
limit: config.limit,
name: config.filePath
}
}
}
]
},
plugins: [
new webpack.BannerPlugin('nan出品，必出精品'), //文件自动添加内容
//js 压缩混淆代码
new UglifyJsPlugin(),
//css文件配置
new ExtractTextPlugin(config.cssPath),
],
};
配置.babelrc 和 postcss.config.js
.babelrc文件内容
{
"presets": ["es2015","react"]
}
postcss.config.js文件内容
module.exports = {
plugins: [
require('autoprefixer')({
browsers: ['last 5 version',"> 1%"] //前五种浏览器版本
})
]
};
模块安装
在当前目录打开cmd，将package.json
然后在里面运行
npm i
进行所需模块安装
代码测试
在public文件夹内创建一个index.html作为浏览器的页面入口，里面代码写上
然后在app目录的main.js文件内，将index.js和index.less引入
//主文件目录，在这里面引入需要让webpack解析的文件
import "./source/index.less";
import "./source/index.css";
require("./source/index");
然后在inde.js和inde.less写一些相关代码
//less文件
body{
background: red;
background-image: url(./images/download.png);
padding: 0;
margin:0;
p{
width:100px;
height:100px;
background: yellowgreen;
}
}
let a = [1,2]; [a[0],a[1]] = [a[1],a[0]]; console.log(a);
最后，在根目录运行命令
npm run dev
会发现页面会自动打开，然后显示你写的效果
