发表日期： 2021-06-04 14:42:08 浏览次数：108
广元网站优化【广元开通400电话】广元网站搭建、广元微信公众号推文外包、广元开通京东拼多多设计、广元淘宝装修
广元市，四川省辖地级市，北与甘肃省、陕西省交界；南与南充市为邻；西与绵阳市相连；东与巴中市接壤；处于四川北部边缘，山地向盆地过渡地带，属于亚热带湿润季风气候；全市幅员面积16319平方公里，下辖3区、4县 [52] ；2020年，广元市常住人口2305657人 [51] 。
广元市自古为入川的重要通道，是苴国故地，入蜀要塞，三国重镇，广元有着深厚的文化底蕴，特别是璀璨的红色基因代代相传。广元是先秦古栈道文化和中国蜀道文化的集中展现地、三国历史文化核心走廊、中国历史上唯一女皇帝武则天的出生地，也是原川陕苏区核心区域，是红四方面军后期首府地、西部战争主战场和长征出发地。 [2]
2020年全市地区生产总值（GDP）为1008.01亿元，按可比价格计算，比上年增长4.2%。成功加入全省“千亿俱乐部”。 [3]
首先可以实现开发环境，保存代码自动更新 其次，可以将代码进行压缩打包
我们需要搭建一个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配置文件
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
会发现页面会自动打开，然后显示你写的效果
