webpack 折腾

1 安装node 环境

2：全局安装webpack

npm install webpack -g

3： 进入项目结构，创建package.json

npm init

4：项目引入webpack

npm install webpack --save-dev

5:

创建webpack.config.js

6：

config配置

 

var webpack=require("webpack");

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {

devtool: 'cheap-module-eval-source-map',

// 插件项 common用于提取多个入口文件的公用部分，生成commonjs。 方便复用

plugins:[commonsPlugin],

／／入口文件

entry: {

joes:"./src/main",

},

／／输出文件

output: {

path: __dirname + "/dist",

filename: "[name].js"

},

／／模块加载器，方便把所有依赖通过引入方式引入到ｊｓ中

module:{

loaders:[

{

test:/\.css$/,loader:'style-loader!css-loader'

},

{

test: /\.js$/, loader: 'babel', exclude: '/node_modules/'

}

]

},

resolve:{

//查找module的话从这里开始查找

root: 'd:/wpackjoes', //绝对路径

//自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名

extensions: ['', '.js', '.json', '.scss'],

//模块别名定义，方便后续直接引用别名，无须多写长长的地址

alias: {

AppStore : 'js/test.js',//后续直接 require('AppStore') 即可

// ActionType : 'js/actions/ActionType.js',

// AppAction : 'js/actions/AppAction.js'

}

}

};

 

７：关于module 的 loader 配置

css：

npm install style-loader css-loader --save-dev

引入时候

sass:

npm ....... sass-loader

 

图片

npm install url-loader --save-dev

它可以根据你的需求将一些图片自动转成base64编码的，

注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片。

 

添加es6代码支持,把自己的es6代码转化es5代码

npm install babel-loader

babel-preset-es2015

--save-dev

 

这其中涉及到es6的模块系统， 详情见es6模块系统

 

8:全局安装第三方库

例如jquery

npm install jquery --save-dev

这样就全局安装了jquery 以后不许再引入

 

9 生成hash名称的script 防止缓存

output: { path: BUILD_PATH, //只要再加上hash这个参数就可以了 filename: '[name].[hash].js' },