首页 > 代码库 > webpack 折腾
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‘ },
webpack 折腾
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。