之前一直以为能力已经够了,想出去找份前端的工作,后来才发现还是自己太差,面试官随便一个问题就能把我问哑,比如,webpack、gulp、grunt这些工具了解多少。这两天学习webpack,踩了不少坑,也学到不少东西,记录下来以便后查。
本博客记录于2017.11.12,使用到的各个版本如下
- webpack:3.8.1
- node:v6.11.3
- react:^16.1.0
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
下载node,里面会集成npm,用npm下载webpack包。
npm install webpack -g
-g 表示全局安装
新建一个文件夹作为项目文件夹,在项目文件夹下shitf+鼠标右键打开命令行,在命令行输入
npm init
提示全部跳过
这时文件夹里会生成一个package.json文件,这个文件的作用是配置项目依赖的包,别人下载了你的项目,只需要npm install就可以直接下载项目依赖的包。
创建文件目录,目录结构如下
+ blog
+ client
+ dist // 编译并打包后的文件
+ images
+ js
+ css
+ index.html // 前端入口文件
+ src
+ assets // 图片等静态资源
+ components // 一些公用组件
+ layouts // 一些布局组件(括jsx和sass文件),比如导航栏、侧边栏等等
+ routes // 路由相关文件
+ routes.js
+ main.js // 整个前端项目的入口文件
+ server // 服务端文件
+ package.json
接下来安装相应的包。
npm install react react-dom redux react-redux react-router antd css-loader style-loader node-sass sass-loader file-loader url-loader autoprefixer postcss-loader --save-dev
npm install extract-text-webpack-plugin path --save-dev
安装babel插件
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-1 babel-plugin-import babel-cli --save-dev
关于–save-dev与–save的区别是–save 会把依赖包名称添加到package.json 文件 dependencies 键下,–save-dev 则添加到 package.json 文件 devDependencies 键下,dependencies是运行时依赖,devDependencies是开发时的依赖。
index.html文件
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>hello worldtitle>
<link rel="stylesheet" href="">
head>
<body>
<div id="app">adiv>
body>
<script src="vendor.bundle.js" type="text/javascript">script>
<script src="bundle.js" type="text/javascript" charset="utf-8">script>
html>
在项目根文件目录下新建webpack.config.js,配置大致如下
var webpack = require('webpack'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
path=require('path');
var config = {
entry: { // 打包入口
index: "./client/src/main.js",
vendor: [ // 将react和react-dom这些单独打包出来,减小打包文件体积
"react",
"react-dom"
]
},
output:{//打包后的文件
path: path.resolve(__dirname,'./client/dist'),
filename: 'bundle.js'
//filename: '[name].js'
},
module: {//打包文件的配置
loaders: [{ //将es6语法的js,jsx转为es5js
test: /\.js|.jsx$/,
exclude: /node_modules/,
loader: "babel-loader",
query:{
presets:['es2015','react']
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:["last 2 version","firefox 15"]}'
},
{
test: /\.(png|jpg|jpng|eot|ttf)$/, // 打包图片和字体文件
loader: 'url-loader?limit=8192&name=images/[name].[ext]'
}]
},
plugins: [//配置插件
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' }), //这是之前单独打包出来的react、react-dom等文件
new ExtractTextPlugin("css/index.css"), // 将所有sass/css文件打包成一个index.css文件
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
}),
new webpack.optimize.UglifyJsPlugin({ // 压缩打包后的代码
compress: {
warnings: false
}
}),
]
}
module.exports = config;
在mian.js写入以下代码
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
hello,word,
document.getElementById('app')
)
打开client/dist/index.html
错误1
ERROR in ./client/src/main.js
Module build failed: SyntaxError: E:/node.js/react/1106ABegin/myTest/client/src/main.js: Unexpected token (5:0)
3 |
4 | ReactDOM.render(
> 5 | hello,word,
| ^
6 | document.getElementById('app')
7 | )
8 |
解决:原因是jsx配置错误,在webpack.config.js中的module模块修改如下
loaders: [{ // babel loader
test: /\.js|.jsx$/,
exclude: /node_modules/,
loader: "babel-loader", //使用babel-loader需要下载相应模块
query:{
presets:['es2015','react']//这里很重要
}
}
错误2
Uncaught ReferenceError: webpackJsonp is not defined
at bundle.js:1
(anonymous) @ bundle.js:1
解决:这里是忘了引用依赖的包,我们在webpack.config.js中把react,react-dom打包成了vendor.bundle.js,所以我们需要在index.html中引入相应的包
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>hello worldtitle>
<link rel="stylesheet" href="">
head>
<body>
<div id="app">adiv>
body>
<script src="vendor.bundle.js" type="text/javascript">script>
<script src="bundle.js" type="text/javascript" charset="utf-8">script>
html>
错误3
解决:找了很久的错误,发现是在index.html中的引用js的时候必须把它放到文档末尾。