Слияние кода завершено, страница обновится автоматически
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>笔记</title>
<link rel="stylesheet" href="./src/other/github-markdown.css">
<link rel="stylesheet" href="./src/other/atom-one-dark.css">
<script src="./src/other/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<style>
.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 45px;
}
</style>
</head>
<body>
<article class="markdown-body">
<h1 id="webpack-react-learning">webpack react learning</h1>
<h2 id="-">项目结构搭建</h2>
<h2 id="webpack-">webpack配置文件</h2>
<ol>
<li><p>安装webpack</p>
<pre><code> npm install webpack -g #全局安装
npm install webpack --save-dev #项目内安装
</code></pre></li>
<li><p>配置入口文件</p>
<pre><code> var path = require('path');
module.exports = {
// 入口文件
entry: path.resolve(__dirname, 'src/js/app.js'),
// 输出文件
output: {
// 输出至哪个文件夹
path: path.resolve(__dirname, 'dist'),
// 输出的文件名
filename: 'bundle.js'
}
}
</code></pre></li>
<li><p>运行项目</p>
<pre><code> webpack --config webpack.develop.config.js
</code></pre></li>
</ol>
<h2 id="-package-json-">使用package.json改造配置文件</h2>
<ul>
<li><p>方便启动项目,可以在package.json 中添加脚本</p>
<pre><code> "scripts": {
"develop": "webpack --config webpack.develop.config.js",
"publish": "webpack --config webpack.publish.config.js"
}
</code></pre></li>
<li><p>运行项目</p>
<pre><code> npm run develop
</code></pre></li>
</ul>
<h2 id="-webpack-dev-server-">使用webpack-dev-server实现浏览器自动刷新</h2>
<ol>
<li><p>安装webpack-dev-server</p>
<pre><code> npm install webpack-dev-server --save-dev
</code></pre></li>
<li><p>修改package.json中配置文件</p>
<pre><code> "develop": "webpack-dev-server --config webpack.develop.config.js --devtool eval-source-map --progress --colors --inline --hot --content-base ./dist",
</code></pre></li>
<li><p>使用npm运行项目</p>
<pre><code> npm run develop
</code></pre></li>
<li><p>此时更改代码后,项目会自动构建, 浏览器也会自动刷新</p>
</li>
</ol>
<h2 id="react-react-dom-babel-loader-">react&&react-dom以及babel-loader的使用</h2>
<ol>
<li><p>安装react 和 react-dom</p>
<pre><code> npm install react react-dom --save
</code></pre></li>
<li><p>安装babel-loader以及相关依赖</p>
<pre><code> npm install babel-loader --save-dev
npm install babel-core babel-preset-es2015 babel-preset-react --save-dev
</code></pre></li>
<li><p>修改webpack.develop配置文件</p>
<pre><code> module: {
rules: [{
test: /\.jsx?$/,
use: [{
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}]
}]
}
</code></pre></li>
<li><p>app.js中书写react代码</p>
<pre><code> // 引入React
import React, { Component } from 'react'
// 引入ReactDOM
import ReactDOM from 'react-dom'
// 使用ReactDOM渲染html节点
ReactDOM.render(
<div>
hello world
</div>,
document.getElementById('app')
)
</code></pre></li>
<li><p>dist目录下index.html中引入bundle.js,并且加入一个id为app的div</p>
</li>
<li><p>修改了配置文件需要重新手动构建项目</p>
<pre><code> npm run develop
</code></pre></li>
</ol>
<h2 id="css-loader-style-loader-">css-loader&&style-loader的使用</h2>
<ol>
<li><p>安装</p>
<pre><code> npm install css-loader style-loader --save-dev
</code></pre></li>
<li><p>修改配置文件</p>
<pre><code> rules: [{
test: /\.jsx?$/,
use: [{
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}]
}, {
test: /\.css$/,
// 注意:必须先写style-loader再写css-loader
loader: 'style-loader!css-loader'
// 下面这种写法也可以
// use: ['style-loader', 'css-loader']
}]
</code></pre></li>
<li><p>书写CSS文件,并在js或jsx文件中引入CSS文件</p>
</li>
<li><p>重新构建</p>
<pre><code> npm run develop
</code></pre></li>
</ol>
<h2 id="sass-loader-">sass-loader的使用</h2>
<ol>
<li><p>安装sass-loader</p>
<pre><code> // sass-loader的使用需要安装node-sass
npm install node-sass --save
npm install sass-loader --save-dev
</code></pre></li>
<li><p>添加配置文件</p>
<pre><code> // 处理js中引用sass文件
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
</code></pre></li>
<li><p>书写sass文件</p>
</li>
</ol>
<h2 id="url-loader-">url-loader的使用</h2>
<ol>
<li><p>安装url-loader和file-loader</p>
<pre><code> npm install url-loader file-loader -save-dev
</code></pre></li>
<li><p>添加配置文件</p>
<pre><code> // 处理图片操作
{
test: /\.(png|jpg|jpeg|gif)$/,
use: 'url-loader?limit=25000'
},
// 处理iconfont
{
test: /\.(eot|woff|ttf|woff2|svg)$/,
use: 'url-loader?limit=2500'
}
</code></pre></li>
<li><p>引用图片文件</p>
</li>
</ol>
<h2 id="webpack-">webpack 发布策略</h2>
<h3 id="-">修改配置文件</h3>
<ol>
<li><p>将webpack.develop.config.js中的配置拷贝到webpack.publish.config.js中</p>
</li>
<li><p>新建一个.bablerc文件,添加如下内容,同时去除webpack.publish.config.js中和此相关的配置</p>
<pre><code> {
"presets":["es2015","react"]
}
</code></pre></li>
<li><p>修改url-loader中相关配置</p>
<pre><code> // 处理图片操作
{
test: /\.(png|jpg|jpeg|gif)$/,
use: 'url-loader?limit=25000&name=images/[name].[ext]'
// 构建时会构建一个images文件夹存放图片
},
// 处理iconfont
{
test: /\.(eot|woff|ttf|woff2|svg)$/,
use: 'url-loader?limit=2500&name=fonts/[name].[ext]'
// 构建时会构建一个fonts文件夹存放icon
}
</code></pre></li>
</ol>
<h3 id="-">分离第三方包</h3>
<ol>
<li><p>修改入口文件</p>
<pre><code> // 分离第三方包后的入口文件
entry:{
app:path.resolve(__dirname, 'src/js/app.js'),
// 需要分离的第三方包名写在数组中
vendors:['react','react-dom']
},
</code></pre></li>
<li><p>增加插件</p>
<pre><code> plugins:[
// 分离第三方包插件
new webpack.optimize.CommonsChunkPlugin({name:'vendors',filename:'vendors.js'})
]
</code></pre></li>
<li><p>在index.html中引入vendors.js</p>
</li>
<li><p>运行npm run publish会看到一个vendors.js被生成</p>
</li>
</ol>
</article>
</body>
</html>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )