webpack手动搭建es6+less开发环境及打包的代码教程

目标

首先可以实现开发环境，保存代码自动更新 其次，可以将代码进行压缩打包

实现

我们需要搭建一个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配置文件

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

   

会发现页面会自动打开，然后显示你写的效果