现代Web开发系列教程_05

本篇不开发新的功能,不过对目前的编译环境重新整理一下。

区别开发编译与生产编译

在webpack.config.js中添加读取环境变量NODE_ENV

...
var isProduction = (process.env.NODE_ENV === 'production');
...

编译出css文件

...
var ExtractTextPlugin = require('extract-text-webpack-plugin');
...
var plugins_options = [
  ...
  new ExtractTextPlugin('css/[name].css', {allChunks: true}),
  ...
];

var loaders = [
  ...
  {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract("style-loader", "css-loader" + (isProduction ? '' : '?sourceMap') + "!postcss-loader")
  },{
      test: /\.less$/,
      loader: ExtractTextPlugin.extract("style-loader", "css-loader" + (isProduction ? '' : '?sourceMap') + "!postcss-loader!less-loader" + (isProduction ? '' : '?sourceMap'))
  }
  ...
];

var webpackConfig = {
    ...
    module: {
        ...
        postcss: function () {
            return [autoprefixer];
        }
    }
};

非生产编译模式,编译出sourcemap,以方便调试

if(!isProduction){
    plugins_options.push(new webpack.SourceMapDevToolPlugin({
        test:      /\.(js|css|less)($|\?)/i,
        filename: '[file].map'
    }));
}

生产编译模式压缩、去注释、优化排序

if(isProduction){
    plugins_options.push(new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        },
        output: {
            comments: false
        }
    }));
    plugins_options.push(new webpack.optimize.OccurenceOrderPlugin());
}

非生产编译模式,启用模块热替换

if(!isProduction){
    plugins_options.push(new webpack.HotModuleReplacementPlugin());
}

非生产编译模式,编译出的js带webpack_dev_client

if(!isProduction){
    entries.webpack_dev_client = 'webpack-dev-server/client?http://0.0.0.0:5000';
    entries.webpack_hot_dev_server = 'webpack/hot/only-dev-server';
}

webpack-dev-server的配置

var devServer_options = {
        host : '0.0.0.0',
        port: 5000,
        contentBase: ".",
        progress: true,
        hot: true,
        inline: true,
        stats: { colors: true },
        noInfo: true,
        historyApiFallback: true
};

var webpackConfig = {
    ...
    devServer: devServer_options,
    ...
};

非生产编译模式,使用eval方式生成sourcemap,这个速度最快

if(!isProduction){ webpackConfig.devtool = ‘eval’; }

使用eslint对js进行静态检查

var loaders = [
  ...
  {
      test: /\.(js|jsx)$/,
      exclude: [/node_modules/], // exclude any and all files in the node_modules folder
      loaders: ['babel-loader', 'eslint-loader', 'strict-loader']
  }
  ...
];

安装一系列npm包

npm install webpack-dev-server --global
npm install webpack-dev-server extract-text-webpack-plugin eslint-loader eslint strict-loader eslint-plugin-react babel-eslint style-loader css-loader postcss-loader postcss less-loader less autoprefixer file-loader url-loader img-loader --save-dev

最后在package.json里加入两行npm script

"scripts": {
  "serve-dev": "./node_modules/.bin/webpack-dev-server --progress",
  "build-prod": "NODE_ENV=production ./node_modules/.bin/webpack --progress"
}

以后执行npm run serve-dev就直接打开了webpack-dev-server了,开发终于不用再依赖于nginx了,直接访问http://127.0.0.1:5000/demo4/demo4.html就可以看到页面效果,而且可以修改了代码后还可以热替换。 如果只想编译出最优化的代码,输入npm run build-prod就好了。

前端应该会玩了吧,下篇我将开始说后端了。

本篇源代码地址

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cs

javascript基础知识点1.0

知识点综述: ---- 在复习JavaScript语法,主要看的是w3cschool的教程。 用法: 1.0必须位于<script></s...

365130
来自专栏王磊的博客

js 创建快捷方式

<script type="text/javascript" language="javascript"> // 创建快捷方式[浏览器设置要低,ff不支...

35650
来自专栏文武兼修ing——机器学习与IC设计

JavaScript入门笔记(2)字符串相关列表对象

字符串相关 字符串基础 字符串历来是各种编程语言坑最多的地方(个人认为),不同软件语言在字符串上的操作的差别比软件语言和硬件描述语言的差距都大(一样是个人认为)...

33260
来自专栏王磊的博客

javascript 复制功能 兼容所有浏览器的解决方案

代码如下: // 兼容所有浏览器 function copyUrl(url) { if (navigator.userAgent.toLowerCase...

39550
来自专栏文武兼修ing——机器学习与IC设计

JavaScript入门笔记(4)MapSetIterable

Map Map的定义 Map是一组键值对的结构,具有极快的查找速度。 Map是JavaScript中更像字典的一种数据结构,使用new Map()定义,可...

371100
来自专栏王磊的博客

js堆栈溢出的问题

    js是最令程序员头疼的问题了,不是语法也不是使用头疼,而是调试头疼,虽然有很方便的各种各样的调试工具,但经管这样有时候一个疏忽的小问题,会导致各种各样的...

40740
来自专栏文武兼修ing——机器学习与IC设计

JavaScript入门笔记(3)条件控制语句循环语句

条件控制语句 条件控制使用if...else if...else语句控制,该语句的使用与C语言几乎完全相同 var i = 10; if (i < 11) { ...

366130
来自专栏王磊的博客

几款浏览器JavaScript调试工具

     WEB开发工具的使用已经非常普及,如果想要更方便于开发的话,不妨看看本文介绍的15款基于浏览器扩展的WEB开发工具。 1.Firebug   Fir...

35630
来自专栏王磊的博客

js时间格式化通用方法

/** * 时间工具类 */ /** * 获取现在的时间戳(精确到s) * 使用:new Date().nowTimestamp * @type {...

56550
来自专栏文武兼修ing——机器学习与IC设计

JavaScript入门笔记(5)函数

函数 函数就是最基本的一种代码抽象的方式 函数的声明与调用 JavaScript中声明函数的方法有两种 声明一个有名称的函数,使用类似C语言的functi...

36280

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励