webpack手动搭建es6+less开发环境及打包的代码教程
文章 3907 0 0 0
发布时间:2019年02月18日

概述

目标

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

实现

我们需要搭建一个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": {}
}

目录结构

然后创建文件目录,如:

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

说明:

- 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

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

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

评论专区
Q群
Q群
Q群
反馈
纠错
App