目录
1. 查看源,切换源
2. package.json配置
npm config get registry // 查看npm当前镜像源
npm config set registry https://registry.npm.taobao.org/ // 设置npm镜像源为淘宝镜像
yarn config get registry // 查看yarn当前镜像源
yarn config set registry https://registry.npm.taobao.org/ // 设置yarn镜像源为淘宝镜像
{
"name": "webpack_react",
"version": "1.0.0",
"description": "STABLE VERSION",
"main": "main.js",
"scripts": {
"prod": "webpack-dev-server --config ./build/webpack.prod.conf.js",
"build": "webpack --config ./build/webpack.prod.conf.js"
},
"keywords": [
"demo"
],
"author": "zhubo",
"license": "ISC",
"devDependencies": {
"antd": "^3.13.4",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-dva-hmr": "^0.4.1",
"babel-plugin-import": "^1.11.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"bootstrap": "^4.3.1",
"css-loader": "^2.1.0",
"echarts": "^4.1.0",
"file-loader": "^3.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.3.1",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"popper.js": "^1.14.7",
"react": "^16.8.2",
"react-dom": "^16.8.2",
"react-router-dom": "^4.3.1",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14",
"webpack-merge": "^4.2.1"
}
}
.babelrc文件
{
"presets": ["env", "stage-2", "react"],
"plugins": [
[
"import", {
"libraryName": "antd",
"style": true
}
],
"transform-runtime",
"transform-decorators-legacy"
],
"env": {
"production": {},
"development": {
"plugins": [
[
"dva-hmr", {
"container": "#app",
"quiet": false
}
]
]
}
},
"comments": false
}
webpack.prod.conf.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const HtmlWebpackPluginConfig = {
// title: 'hello,零和壹在线课堂', // html5文件中部分
filename: 'front.html', // 默认是index.html,服务器中设置的首页是index.html,如果这里改成其它名字,那么devServer.index改为和它一样
// 也是 context+template是最后模板的完整路径,./不能少
template: './templates/daqi.html', // 如果觉得插件默认生成的hmtl5文件不合要求,可以指定一个模板,模板文件如果不存在,会报错,默认是在项目根目录下找模板文件,才模板为样板,将打包的js文件注入到body结尾处
inject: 'body' // true|body|head|false,四种值,默认为true,true和body相同,是将js注入到body结束标签前,head将打包的js文件放在head结束前,false是不注入,这时得要手工在html中加js
};
module.exports = {
mode: 'production',
context: path.resolve(__dirname, '../src'), //D:\03www2018\study\webpack2017\build\src
entry: './router_demo', //main.js中的js可以省略,前面的./不能省
output: {
path: path.resolve(__dirname, '../dist'),
filename: './[hash]bundle.js',
hashDigestLength: 8
},
module : {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less/,
use: ['style-loader', 'css-loader', 'less-loader'],
},
{
test: /.(gif|jpg|jpeg| png|svg)$/,
use: [
{
loader:'url-loader',
options: {
limit:1024,
name: '[name]-xxx.[ext]'
}
}
]
},
{
test: /\.tsx?$/,
loader: 'ts-loader'
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.js$/,
// loader:'babel-loader',
exclude:/node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'stage-2', 'react'],
plugins: [['import', {"libraryName": "antd", "style": "css"}]]
}
},
include:path.resolve(__dirname, '../src')
} ,
{
test: /\.html$/,
use: {
loader: 'html-loader',
options: {
attrs: [':data-src']
}
}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
//name: '[path][name].[ext]',
name: '[name]2.[ext]', //最后生成的文件名是 output.path+ outputPaht+ name,[name],[ext],[path]表示原来的文件名字,扩展名,路径
//useRelativePath:true,
outputPath: 'img/' // 后面的/不能少
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin(HtmlWebpackPluginConfig), // 生成首页html5文件,外部插件需要安装
new webpack.DefinePlugin({ BJ: JSON.stringify('北京') }), // 内置插件,无须安装,可以理解为它是webpack实例的一个方法,该插件相当于apache等web服务器上定义一个常量
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery": "jquery",
Popper: ['popper.js', 'default'] //webpack打包bootstrap4的时候,需要手动安装jquery和popper.js
})
],
devServer: {
contentBase: path.resolve(__dirname, "../dist"), //网站的根目录为 根目录/dist,这个路径一般与output.path一致,因为html插件生成的html5页是放在output.path这个目录下
port: 9000, //端口改为9000
open: true, // 自动打开浏览器,每次启动服务器会自动打开默认的浏览器
index: 'front.html', // 与HtmlWebpackPlugin中配置filename一样
inline: true, // 默认为true, 意思是,在打包时会注入一段代码到最后的js文件中,用来监视页面的改动而自动刷新页面,当为false时,网页自动刷新的模式是iframe,也就是将模板页放在一个frame中
hot: false,
compress: true //压缩
}
};
@Component
@WebFilter
public class CommonHeaderFilter implements Filter{
private static final Logger logger = LoggerFactory.getLogger(CommonHeaderFilter.class);
private FilterConfig filterConfig;
private String noFilterURI;
/**
* @description 构造函数
*/
public CommonHeaderFilter() {
filterConfig = null;
noFilterURI = null;
}
/**
* @description 销毁
*/
@Override
public void destroy() {
// TODO Auto-generated method stub
}
/**
* @description 过滤
* @param servletRequest
* @param servletResponse
* @param filterChain
* @throws IOException
* @throws ServletException
*/
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse,
FilterChain filterChain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) servletResponse;
HttpServletRequest req = (HttpServletRequest)servletRequest;
String origin = req.getHeader("Origin");
if(null != origin && origin != ""){
response.setHeader("Access-Control-Allow-Origin",origin.replaceAll("\r\n","")); // Cannot use wildcard *, browser limitation
}
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT, PATCH");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with, x-requested-id, content-type, x-paginate-offset, x-paginate-limit");
response.setHeader("Access-Control-Expose-Headers", "x-paginate-grand-total, x-requested-id");
if (req.getMethod().equals("OPTIONS")){
/*
* 跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站有权限访问哪些资源。
* 另外,规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),
* 浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),
* 从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。
* 在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)。
* 参考:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
*/
response.setStatus(HttpServletResponse.SC_OK);
}else{
String reqId = ((HttpServletRequest) servletRequest).getHeader("x-requested-id");
if (null != reqId && reqId.length() > 0) {
((HttpServletResponse) servletResponse).setHeader("x-requested-id", reqId.replaceAll("\r\n",""));
}
filterChain.doFilter(servletRequest,servletResponse);
}
}
/**
* 初始化
* @param arg0
* @throws ServletException
*/
@Override
public void init(FilterConfig arg0) throws ServletException {
// TODO Auto-generated method stub
this.filterConfig = arg0;
noFilterURI = filterConfig.getInitParameter("noFilterURI");
}
}