首页 > 代码库 > Webpack基础
Webpack基础
官方文档:
http://webpack.github.io/docs/
1. 安装python
2. 安装node.js msi
3. npm自动打包在最新的node.js安装包里
被封的包用国内镜像下载
// 全局安装webpack
npm install webpack -g
常规项目把依赖写入package.json包中去
// 进入项目
cd myproject
// 初始化npm,生成package.json
npm init
// 写入package.json关于webpack的依赖
npm install webpack --save-dev
在项目目录新建webpack.config.js文件,并且写入:
var webpack = require(‘webpack‘); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin(‘common.js‘); module.exports = { // 插件项 plugins: [commonsPlugin], // 页面入口文件配置 entry: { index: ‘./src/js/page/index.js‘, component: ‘./src/js/page/component.js‘ }, // 入口文件输出配置 output: { path: ‘dist/js/page‘, filename: ‘[name].js‘ }, module: { // 加载器配置 loaders: [ // .css文件使用 style-loader 和 css-loader 来处理 { test: /\.css$/, loader: ‘style-loader!css-loader‘ }, // .js文件使用 jsx-loader 来编译处理 { test: /\.js$/, loader: ‘jsx-loader?harmony‘ }, // .scss文件使用style-loader、css-loader和sass-loader来编译处理 // loader可以省略不写,多个loader之间用!连接 { test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘ }, // 图片文件使用 url-loader 来处理,小于8kb的直接转为base64 // url-loader将样式中引用到的图片转为模块来处理,使用该加载器需要先进性安装: // npm install url-loader --save-dev { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192‘ } ] }, // 其他解决方案配置 resolve: { // 从这里查找module root: ‘E:/myproject/node_modules‘, // 绝对路径 // 自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名 extensions: [‘‘, ‘.js‘, ‘.json‘, ‘.scss‘], // 模块别名定义,方便后续直接引用别名,无须多谢长长的地址 alias: { AppStore: ‘js/stores/AppStores.js‘, // 后续直接 require(‘AppStore‘) 即可 ActionType: ‘js/actions/ActionType.js‘, AppAction: ‘js/actions/AppAction.js‘ } } };
配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式
(其实应该说超过8kb的才使用 url-loader 来映射到文件,否则转为data url形式)。
// 执行webpack.config.js文件
webpack
// 压缩混淆脚本,这个非常非常重要!
webpack - p
// 安装vue框架
npm install vue --save-dev
我的webpack与vue打包实例github地址:
https://github.com/liuqiuchen/myWebpack
Webpack基础
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。