webpack手動搭建 es6+less 開發環境和打包

專注前端30年發表於2017-11-17

目標

首先可以實現開發環境，儲存程式碼自動更新
其次，可以將程式碼進行壓縮打包

程式碼地址

本人將程式碼打包上傳到了雲上面一份，詳見地址點我

實現

我們需要搭建一個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配置檔案
- postcss.config.js -postcss相容配置檔案

程式碼

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作為瀏覽器的頁面入口，裡面程式碼寫上

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--<link rel="stylesheet" href="css/index.css">--><!--在開發環境不需要引入，預設css是放在js裡面-->
    <title>Document</title>
</head>
<body>
<div></div>
</body>
<script src="js/index.js"></script>
</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;

  div{
    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搭建react開發環境
2018-05-14
WebReact開發環境
react+webpack+webstorm開發環境搭建
2019-02-16
ReactWebORM開發環境
基於Webpack搭建React開發環境
2018-05-16
WebReact開發環境
vue官方webpack模版多個打包環境搭建
2018-11-28
VueWeb
[php]手動搭建php開發環境（排錯）
2014-12-13
PHP開發環境
Webpack 4.x搭建react開發環境
2018-08-14
WebReact開發環境
安卓自動化打包環境搭建
2018-06-07
安卓
從零開始搭建webpack+react開發環境
2018-05-08
WebReact開發環境
webpack4 x 快速搭建vue開發環境
2019-03-03
WebVue開發環境
基於 Webpack4 搭建 Vue 開發環境
2018-10-14
WebVue開發環境
webpack與SPA實踐之開發環境搭建
2017-05-31
Web開發環境
Web 開發手冊——PHP 開發環境搭建
2020-05-09
WebPHP開發環境
Webpack多環境搭建
2017-12-21
Web
重構之路：webpack區分生產環境和開發環境
2019-02-19
Web開發環境
從零開始使用 Webpack 搭建 Vue3 開發環境
2020-07-09
WebVue開發環境
webpack4生產環境和開發環境的對比
2019-04-08
Web開發環境
從零搭建前端開發環境----React+Ts+Webpack基礎搭建
2023-03-11
前端開發環境ReactWeb
Webpack 配置 React 開發環境
2017-07-02
WebReact開發環境
webpack學習筆記：搭建基本的前端開發環境
2018-07-02
Web筆記前端開發環境
從零開始搭建一個 Webpack 開發環境配置（附 Demo）
2019-01-30
Web開發環境
Webpack(開發、生產環境配置)
2020-11-13
Web
webpack配置React開發環境(上)
2017-03-08
WebReact開發環境
React + Typescript + Webpack 開發環境配置
2016-12-04
ReactTypeScriptWeb開發環境
1 – 搭建開發環境
2019-02-23
開發環境
rollup 開發環境搭建
2021-08-16
開發環境
搭建go開發環境
2019-01-31
Go開發環境
Androdi開發環境搭建
2019-01-22
開發環境
前端開發環境搭建
2020-09-25
前端開發環境
Theia 開發環境搭建
2023-03-28
開發環境
QEMU 開發環境搭建
2020-10-15
開發環境
Cordova 開發環境搭建
2018-06-02
開發環境
搭建VUE開發環境
2018-04-25
Vue開發環境
安卓開發環境搭建
2014-01-28
安卓開發環境
搭建Layui開發環境
2017-12-23
UI開發環境
搭建scala開發環境
2015-03-04
開發環境
EBS開發環境搭建
2014-05-05
開發環境
andriod開發環境搭建，
2014-12-16
開發環境
Erlang開發環境搭建
2015-07-08
開發環境