写在前面的话
现在最流行的前端架构应该就是webpack+react+rudex+router+es6这套了，最近练习了webpack2，写出来和各位同学交流一下，本文只针对这套工具搭配介绍，没有对单独工具详细说明，第一次写这种分享，有不好的地方请多指教。
webpack是什么？
直接引用官方的介绍：Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
需要工具
编译工具推荐idea，使用npm安装包，node自带npm
初始化
npm init
执行完npm init后，根目录会出现一个package.json文件，这个文件可以看到我们的文件配置信息，还可以根据这个文件进行npm包管理
项目开始
先安装需要的各种包
babel
Babel 用于转化你的 JavaScript 代码，默认情况下，Babel 自带了一组 ES2015 语法转化器。这些转化器能让你现在就使用最新的 JavaScript 语法，而不用等待浏览器提供支持。
loader
css-loader 处理css中路径引用等问题
style-loader 动态把样式写入css
less-loader less编译器
postcss-loader less再处理
file-loader 用来处理图片
image-webpack-loader
等等，相信大家这些都看的烦烦的，我就一次性把所需要的包全贴出来，大家在命令行执行一下npm i就好，不用一个个安装
下面是我的package.js里的devDependencies安装包，大家直接拷贝过去就好
"devDependencies":{
"autoprefixer":"^7.1.1",
"babel-cli":"^6.24.1",
"babel-core":"^6.25.0",
"babel-loader":"^7.0.0",
"babel-plugin-react-transform":"^2.0.2",
"babel-preset-es2015":"^6.24.1",
"babel-preset-latest":"^6.24.1",
"babel-preset-react":"^6.24.1",
"clean-webpack-plugin":"^0.1.16",
"css-loader":"^0.28.4",
"extract-text-webpack-plugin":"^2.1.2",
"file-loader":"^0.11.1",
"html-webpack-plugin":"^2.28.0",
"image-webpack-loader":"^3.3.1",
"jquery":"^3.2.1",
"less":"^2.7.2",
"less-loader":"^4.0.4",
"moment":"^2.18.1",
"postcss-import":"^10.0.0",
"postcss-loader":"^2.0.5",
"react":"^15.5.4",
"react-dom":"^15.5.4",
"react-redux":"^5.0.5",
"react-router":"^4.1.1",
"react-router-dom":"^4.1.1",
"react-router-redux":"^4.0.8",
"react-transform-hmr":"^1.0.4",
"redux":"^3.6.0",
"style-loader":"^0.18.1",
"url-loader":"^0.5.8",
"webpack":"^2.6.1"
},
"dependencies":{
"react-redux":"^5.0.5"
}
执行完npm i以后，各种包也就安装好了，为了节省发开步骤，我们会把相关的命令配置到一个文件里，在根目录下建一个webpack.config.js，下面我把我的配置贴出来,
constpath =require('path');
constwebpack =require('webpack');
lethtmlWebpackPlugin =require('html-webpack-plugin');
module.exports= {
context:__dirname+'/app',
entry: ['./main.jsx'],
output: {
path: path.resolve(__dirname+'/dist'),
filename:'bundle.js',
//publicPath: "http:/cdn.com" //在引用文件加上绝对路径
},module: {
loaders: [
{
test:/\.jsx?$/,
loader:"babel-loader?cacheDirectory",
exclude:/node_modules/,
include:/app/
},
{
test:/\.css$/,
//loaders: ['style-loader','css-loader?postcss-loader']
use:[
'style-loader','css-loader?minimize?importLoaders=1','postcss-loader'
]
},
{
test:/\.less/,
//loaders: ['style-loader','css-loader?postcss-loader']
use:[
'style-loader','css-loader?minimize?importLoaders=1','postcss-loader','less-loader'
]
},
{
test:/\.(gif|png|jpe?g|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash:5].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
},
plugins: [
newwebpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"window.jQuery":"jquery"
}),
//new ExtractTextPlugin('[name].css'),、
newhtmlWebpackPlugin({
template:__dirname+'/build/index.html',
filename:'index.html',
title:'111',
//inject: false, //将引用的文件放到哪里
//chunks: ['main'], //只引入mian
//excludeChunks: ['main'], //刚好和chunks相反
// minify: {
// removeComments: true, //删除注释
// collapseWhitespace: true, //删除空格
// }
}),
],
devServer: {
disableHostCheck:true,
proxy: {
'': {
changeOrigin:true,
target:'',
host:'',
},
'': {
changeOrigin:true,
target:'',
host:'',
}
}
}
};
.babelrc
在根目录下建一个.babelrc，这个文件是用来设置转码的规则和插件的，下面是配置信息
{
"presets":[
"react",
"es2015"
],
"env":{
// only enable it when process.env.NODE_ENV is 'development' or undefined
"development":{
"plugins":[["react-transform",{
"transforms":[{
"transform":"react-transform-hmr",
// if you use React Native, pass "react-native" instead:
"imports":["react"],
// this is important for Webpack HMR:
"locals":["module"]
}]
// note: you can put more transforms into array
// this is just one of them
}]]
}
}
}
postcss.config.js
同在在根目录下建一个postcss.config.js，为样式自动添加浏览器前缀
module.exports= {
plugins: [
require('autoprefixer')
]
}
开发
先说下项目结构：app文件用来存放我们的项目，actions是放ajax请求的，asset存放静态资源，components用来存放公用组件，containers用来存放大组件，reducers是redux来处理数据的，main.jsx是入口文件，plugin是用来扩展插件的build存放模板文件，dist是打包输出后的文件，webpack.config.js是开发模式的配置，webpack.config.p.js是生产模式的配置
网友评论