webpack2 项目构建一

发布时间:2017-7-9 7:19:59编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"webpack2 项目构建一 ",主要涉及到webpack2 项目构建一 方面的内容,对于webpack2 项目构建一 感兴趣的同学可以参考一下。

webpack2 项目构建一

2017-07-01 18:03 by 龙恩0707, ... 阅读, ... 评论, 收藏, 编辑

最近工作忙,学习被暂停了,还是网上多看看资料,多学习学习一下,看到一些好的资料,自己想整理一下,这不,webpack2项目构建都还没有弄懂,webpack3就已经发布了,说实话周末现在真不想看书和研究东西,拿着手机玩玩游戏,看看电视真爽,但是IT行业没有办法,技术在不断的更新,不学习安慰安慰一下自己,心里过不去,万一过1-2年被淘汰了,找份工作都不容易,因此还是多学习学习下,资料多整理一下,刚看完,阮一峰老师写的 45岁以后的人生 

说实话,感慨肯定有,不要说45岁以后,就说30来岁,现在周末都不想去折腾技术,所以IT行业会为以后担忧的,好了先不说了;

项目的目录结构如下:

### 目录结构如下:demo                                        # 工程名|   |--- dist                               # 打包后生成的目录文件             |   |--- node_modules                       # 所有的依赖包|   |--- src                                # 项目的文件包|   |    |--- common|   |    |     |---css                      # 公用页面的css文件|   |    |     |---js                       # 公用页面的js文件|   |---|   |--- .babelrc                           # 支持es6      |   |--- .gitignore  |   |--- README.md|   |--- index.html                         # 首页入口文件|   |--- package.json                      |   |--- webpack.config.js                  # 配置文件 |   |--- webpack.production.config.js       # 上线打包配置文件

webpack 配置项如下代码:

// 导入路径包const path = require('path'); const webpack = require('webpack');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {    //开启sourceMap便于调试    devtool: 'eval-source-map',     //入口文件,    entry: './src/main.js',     output: {        // 输出文件到当前目录下的 build文件夹内        path: path.resolve(__dirname, 'build'),         publicPath: '/assets/', //指定资源文件引用的目录        filename: 'bundle.js' // 指定打包为一个文件 bundle.js        // filename: '[name].js' // 可以打包为多个文件    },    // 使用loader模块    module: {        /*          * 在webpack2.0版本已经将 module.loaders 改为 module.rules, 当然module.loaders也是支持的。         * 同时链式loader(用!连接)只适用于module.loader,同时-loader不可省略          */        rules: [          {            test: /\.css$/,            use: [              'style-loader', {                loader: 'css-loader',                options: {                  // modules: true // 设置css模块化,详情参考 https://github.com/css-modules/css-modules                }              },               {                loader: 'postcss-loader',                // 参考 https://github.com/postcss/postcss-loader                options: {                  plugins: function() {                    return [                      require('autoprefixer')                    ];                  }                }              }]          },           {            test: /\.styl(us)?$/,            use: [                'style-loader', 'css-loader', {                   loader: "postcss-loader",                   options: {                      plugins: function() {                        return [                          require('autoprefixer')                        ];                      }                    }                }, 'stylus-loader']          },           {            test: /\.js$/,            loader: 'babel-loader',             exclude: /node_modules/ //需要排除的目录          }        ]    },    // 配置devServer各种参数    devServer: {        // contentBase: "./",   // 本地服务器所加载的页面所在的目录        hot: true,              // 配置HMR之后可以选择开启        historyApiFallback: true, // 不跳转        inline: true // 实时刷新    },    plugins: [        new HtmlWebpackPlugin({            template: './index.html' // 模版文件        }),        new webpack.HotModuleReplacementPlugin() // 热加载插件    ]}

package.json 打包配置如下:

"scripts": {    "start": "webpack-dev-server",    "build": "set NODE_ENV=production&&webpack --config ./webpack.production.config.js"  },

在项目中 进入项目的根目录后,运行 npm run start 即可运行项目;
在webpack2.0中使用 module.rules 来 代替之前的 module.loaders, 并且使用了 postcss-loader 插件,该插件的作用是:
用来对 .css文件进行处理,并添加在 style-loader 和 css-loader 之后,通过一个额外的 postcss方法来返回所需要使用的 PostCss插件,比如,代码返回
require('autoprefixer') 的作用是 加载 Autoprefixer插件。那么Autoprefixer插件的作用是为 css中的属性添加浏览器特定的前缀,因为一些css新属性,
各个浏览器下并不支持,因此使用该插件就可以做这些事情,比如在页面的代码如下:

h1 {  display: flex;}

那么实际在页面上,通过Autoprefixer插件会自动渲染为:

h1 {  display: -webkit-box;  display: -ms-flexbox;  display: flex;}

该插件就是解决浏览器前缀的问题,当然还有很多插件都可以往这个里面加。
在webpack的配置文件中可以对devServer 配置如下:

devServer: {  // contentBase: "./",   // 本地服务器所加载的页面所在的目录  hot: true,              // 配置HMR之后可以选择开启  historyApiFallback: true, // 不跳转  inline: true // 实时刷新}

这时候我们就可以监听入口文件的改变,比如目前项目中的入口文件是 main.js,那么main.js及所有通过import进来的css和js文件进来的,只要有修改,都会
实时刷新,但是html文件修改不能实时刷新了,修改后需要我们手动刷新了。如上配置 devServer的 "inline"选项会为页面添加 "热加载"功能,"hot"功能
会开启 "热替换",即首先重新加载组件改变的部分(不是重新加载整个页面),如果两个参数都有的话,当资源改变时,webpack-dev-server将先尝试 热替换,
如果失败则会重新加载整个页面。 但是要实现热加载的话,还需要在代码中加入如下代码:

plugins: [  new webpack.HotModuleReplacementPlugin() // 热加载插件]

配置中 devtool: 'eval-source-map', 配置会生成map文件,便于调试代码。

webpack2.0增加了对ES6模块的支持,不需要任何配置,webpack只针对 import导入和export 导出 的模块才会被编译为ES5,如果想所有的打包文件被编译成ES5的话,需要使用babel编译器转换,因此需要按照babel,然后在项目的根目录文件下 添加 .babelrc文件即可;

{  "presets": [    ["es2015", {"modules": false}]  ]}

并且在webpack中需要添加loader,如下:

{  test: /\.js$/,  loader: 'babel-loader',   exclude: /node_modules/ //需要排除的目录}

git上代码连接


上一篇:linux内核数据结构之链表【转】 - 张昺华
下一篇:Ubuntu 16.04安装Sublime Text3

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款