webpack3.x 配置

webpack3.x 主配置webpack.config.js文件，每个模块的详细信息都有一定的注释，如果有不对的地方，还请指教！

大纲：

1、创建package.json文件

2、创建.babelrc文件

3、创建webpack.config文件

目前3个文件即可,下面具体介绍：

一、基础配置

1、首先全局安装webpack 的基础配置，

npm i webpack -g

在本地如果没有package.json 文件，可以执行初始化操作

npm init

2、创建package.json 文件

{
  "name": "demo",
  "version": "1.0.3",
  "description": "EOI",
  "main": "gulpfile.js",
  "dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "vue": "^2.4.4",
    "vue-hot-reload-api": "^2.1.0",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^13.0.5",
    "vue-resource": "^1.3.4",
    "vue-router": "^2.7.0",
    "vue-style-loader": "^3.0.3",
    "vue-template-compiler": "^2.4.4",
    "vue-touch": "^1.1.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "clean-webpack-plugin": "^0.1.17",
    "css-loader": "^0.28.7",
    "enhanced-resolve": "^3.4.1",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "gulp": "^3.9.1",
    "gulp-imagemin": "^3.3.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-sftp": "^0.1.5",
    "html-webpack-plugin": "^2.30.1",
    "ip": "^1.1.5",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "path": "^0.12.7",
    "react": "^16.0.0",
    "style-loader": "^0.18.2",
    "text-loader": "^0.0.1",
    "url-loader": "^0.5.9",
    "vue": "^2.4.4",
    "vue-loader": "^13.0.5",
    "vue-router": "^2.7.0",
    "vuex": "^2.4.1",
    "watchpack": "^1.4.0",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1",
    "xml-loader": "^1.2.1"
  },
  "scripts": {
    "build": "set NODE_ENV=prod&&gulp imgMin --progress --colors",
    "testBuild": "gulp TestBuild --progress --colors",
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build",
    "devTest": "gulp devTest",
    "devDist": "set NODE_ENV=prod&&gulp devTest218 --progress --colors",
    "devDistMainline3": "gulp devDistMainline3"
  },
  "author": "",
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "bai"
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68

上面是webpack、vue及其es6的转码安装的版本信息介绍。

着重介绍下： package.json 文件中的scripts，这里边可以自己配置，表示启动node命令：

比如说平时运行的：npm run build、npm run dev,npm run start 等等就是在这里配置的，同时也可以自定义，如果不明白啥意思：看这里 => 点我！

二、安装使用命令：(2种安装方法，任何一种都行)

1、简单方法：

复制上面的 package.json文件到你的工作目录，执行

npm install

即可，他会自动下载 package.json文件中的所有依赖包文件

优点：省事儿方便，一条命令一部到位。 
缺点：只会下载 package.json文件的指定版本，如果webpack有升级到3.x ++ 的话，就达不到你想要的效果了（我会时刻更新），如果这样，那么使用2的解决方案：

2、可以使用 npm i vue webpack --save-dev 等等去下载：

例如：

npm i --save-dev babel-core babel-loader babel-plugin-transform-runtime babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-runtime clean-webpack-plugin css-loader enhanced-resolve extract-text-webpack-plugin file-loader html-webpack-plugin ip less less-loader path style-loader text-loader url-loader vue vue-loader vue-router vuex watchpack webpack webpack-dev-server xml-loader
  • 1

PS：

1、如果npm不能使用的话，可以使用淘宝的镜像cnpm,进行操作

npm install -g cnpm –registry=https://registry.npm.taobao.org

2、如果是linux系统或者mac，前面可以加上sudo，以管理员去安装，部分插件写入系统是需要管理员权限的！

三、创建webpack.config.js文件
var webpack = require('webpack'),
    path = require('path'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    ExtractTextPlugin = require('extract-text-webpack-plugin'),
    uglifyJsPlugin = webpack.optimize.UglifyJsPlugin,
    ip = require('ip'),
    CleanPlugin = require('clean-webpack-plugin');

console.log("======动态ip地址========= ：" + ip.address())

// 这个插件不在 Webpack 1.x 中，所以我们需要将这个文件复制到我们的项目里，webpack2.x则不需要
const HashedModuleIdsPlugin = require('./autopkg/HashedModuleIdsPlugin')

module.exports = {
    entry: {
        "babel-polyfill": "babel-polyfill", //用来解决IE9的兼容性
        app: path.resolve(__dirname, '你的入口文件路劲地址 + "/app.js"),//项目的入口文件 app.js
        vendor: ['vue', 'vue-router', 'vuex'],//公共模块的集合
    },
    output: {
        path: path.resolve(__dirname, "./dist"),
        publicPath: './', //这里必须是反斜杠且devServer.proxy.target必须存在，不然到时候index.html  script src路劲会找不到
        filename: 'assets/js/[name].js',
        chunkFilename: "chunk/[name].chunk.js",
    },
    devServer: {
        inline: true, //设置为true，代码有变化，浏览器端刷新。
        open: true, //:在默认浏览器打开url(webpack-dev-server版本> 2.0)
        port: "9000",//页面端口
        compress: true, //使用gzip压缩
        host: ip.address(),//ip地址，同时也可以设置成是localhost,
        progress: true, //让编译的输出内容带有进度和颜色
        historyApiFallback: true, //回退:支持历史API。
        contentBase: "./", //本地服务器所加载的页面所在的目录
        proxy: {
            '*': {
                target: 'http://127.0.0.1:80', //跨域Ip地址
                secure: false
            }
        }
    },
    /* 该功能主要是给css 加上前缀，兼容
     * 暂时不需要，因为加入该插件，会增加很多兼容性的样式，css代码量会成倍的增加
     */
    /*postcss: [
        require('autoprefixer') //调用autoprefixer插件
    ],*/
    resolve: {
        alias: {
            //vue的配置
            'vue': 'vue/dist/vue.min',
            'vue-router': 'vue-router/dist/vue-router.min',
            'vuex': 'vuex/dist/vuex.min',

            //react的配置
            'react': 'react/dist/react.min',
            'react-dom': 'react-dom/dist/react-dom.min',
            'redux': 'redux/dist/redux.min',
            'react-redux': 'react-redux/dist/react-redux.min',
        },
        //extensions: ['','.js', '.less', '.css', '.vue', '.jsx'],//1.0的配置
        extensions: ['.js', '.less', '.css', '.vue', '.jsx'],//2.0的配置

    },
    externals: {

    },
    module: {
        // 解决动态js url警告错误 2017-05-03
        unknownContextRegExp: /$^/,
        unknownContextCritical: false,

        // require(expr)
        exprContextRegExp: /$^/,
        exprContextCritical: false,

        // require("prefix" + expr + "surfix")
        wrappedContextRegExp: /$^/,
        wrappedContextCritical: false,
        // end

        //vue1.0 leader是可以省略的 例如：loader: 'vue',，vue2.0 是不能省略的，例如： 例如：loader: 'vue-loader'
        loaders: [{
            test: /\.vue$/,
            loader: 'vue-loader',
        }, {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }, {
            test: /\.json$/,
            loader: "json-loader"
        }, {
            test: /\.xml$/,
            loader: "xml-loader"
        }, {
            test: /\.(css|less)$/,
            loader: "style-loader!css-loader!less-loader"
        }, {
            test: /\.(png|jpg|jpeg|gif|icon|webp)$/,
            loader: 'url-loader?limit=4192&name=assets/img/[name].[hash:5].[ext]'
        }, {
            test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
            loader: "file-loader?&name=assets/fonts/[name].[ext]"
        }, {
            test: /\.txt$/,
            loader: "text-loader"
        },{
            test: /\.jsx$/,
            exclude: /node_modules/,
            loaders: ['jsx-loader', 'babel-loader']
        }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "你的入口文件路劲地址" + '/index.html'
        }),
        new HashedModuleIdsPlugin(),
        //用于合并代码，分模块更改进行打包优化，也就是说你更改这个模块，只打包这个模块，不影响你的公共文件---begin
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
            chunks: ['vendor'],
        }),
        //----------------------end----------------

        new ExtractTextPlugin("assets/css/[name].[contenthash:5].css", {
            allChunks: false /*是否将分散的css文件合并成一个文件*/
        }),
        new webpack.NoErrorsPlugin() //跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。
    ]
};

if(process.env.NODE_ENV == "prod") {
    //清空输出目录
    module.exports.plugins.push(new CleanPlugin(["./dist"], {
        "root": path.resolve(__dirname, ""),
        verbose: true,
        dry: false
    }));
    //代码压缩
    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: true
            }
        })
    );

} else {
    //热加载插件
    module.exports.plugins.push(new webpack.HotModuleReplacementPlugin());
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156

PS：介绍：

1、如果中途哪个模块出问题了，或者找不到了，直接使用npm i 模块名 --save-dev进行安装即可！

2、模块功能介绍：

webpack.config.js中的==devServer==的信息介绍：

--content-base <file/directory/url/port>：内容的基本路径。
--quiet：不要将任何东西输出到控制台。
--no-info：抑制无聊的信息。
--colors：向输出添加一些颜色。
--no-colors：不要在输出中使用颜色。
--compress：使用gzip压缩。
--host <hostname/ip>：主机名或IP。绑定到所有主机。0.0.0.0
--port <number>： 港口。
--inline：将webpack-dev-server运行时嵌入到包中。
--hot：添加并将HotModuleReplacementPlugin服务器切换到热模式。注意：确保不要再添加HotModuleReplacementPlugin两次。
--hot --inline还添加了webpack/hot/dev-server条目。
--public：覆盖--inline客户机模式下使用的主机和端口（对VM或Docker有用）。
--lazy：不看，根据要求进行编译（不能与之组合--hot）。
--https：通过HTTPS协议提供webpack-dev-server。包括在提供请求时使用的自签名证书。
--cert，--cacert，--key：路径的证书文件。
--open：在默认浏览器中打开url（对于webpack-dev-server版本> 2.0）。
--history-api-fallback：支持历史API后备。
--client-log-level：控制浏览器中显示的控制台日志消息。使用error，warning，info或none
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
四、最后一步：建立.babelrc文件
{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "build": {
      "optional": ["optimisation", "minification"]
    }
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
五、完成

安装成功之后，就可以配置 ==webpack.config.js== 中的你的入口文件了！

Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区