本地开发服务器 安装 webpack-dev-server1 npm install --save-dev webpack-dev-server
修改配置文件 webpack.config.js1 2 3 4 5 6 7 8 9 10 11 module.exports = { ... devServer: { contentBase: "./", //告诉服务器在哪里，从提供内容 port: 9000, //端口 inline: true, // compress: false, //是否启用gzip压缩 historyApiFallback: false, //将404定向到固定位置 } ... };
修改 package.json1 2 3 4 5 6 7 { ... "scripts": { "dev": "webpack-dev-server", }, ... }
webpack HotModuleReplacement 1 npm install --save react-hot-loader@next
Create a .babelrc1 2 3 4 5 6 7 8 9 { "presets": [ ["es2015", {"modules": false}], "react" ], "plugins": [ "react-hot-loader/babel" ] }
webpack.config.js1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 const { resolve } = require('path'); const webpack = require('webpack'); module.exports = { context: resolve(__dirname, 'src'), entry: [ 'react-hot-loader/patch', 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './index.js' // the entry point of our app ], output: { filename: 'bundle.js', path: resolve(__dirname, 'dist'), publicPath: '/' }, devtool: 'inline-source-map', devServer: { hot: true, // enable HMR on the server }, module: { rules: [ { test: /\.jsx?$/, use: [ 'babel-loader', ], exclude: /node_modules/ //注意，这里不能使用 options: {} 应该在项目根目录创建 .babelrc }, { test: /\.css$/, use: [ 'style-loader', 'css-loader?modules', ], }, ], }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), // prints more readable module names in the browser console on HMR updates ], };
src/index.js1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 import React from 'react'; import ReactDOM from 'react-dom'; import { AppContainer } from 'react-hot-loader'; // AppContainer is a necessary wrapper component for HMR import App from './components/App'; const render = (Component) => { ReactDOM.render( <AppContainer> <Component/> </AppContainer>, document.getElementById('root') ); }; render(App); // Hot Module Replacement API if (module.hot) { module.hot.accept('./components/App', () => { render(App) }); }
webpack 仪表盘 安装 webpack-dashboard1 npm install webpack-dashboard --save-dev
修改配置文件 webpack.config.js1 2 3 4 5 6 7 8 9 10 // Import the plugin: var DashboardPlugin = require('webpack-dashboard/plugin'); // If you aren't using express, add it to your webpack configs plugins section: plugins: [ new DashboardPlugin({ port: 3001 }) ] // If you are using an express based dev server, add it with compiler.apply compiler.apply(new DashboardPlugin());
HTML代码热加载 webpack-dev-server 只能监控入口文件（JS/LESS/CSS/IMG）的变化，因此 HTML 文件的变化必须依赖插件来进行监控。html-webpack-plugin1 npm install html-webpack-plugin --save-dev
修改配置文件 webpack.config.js， 把 index.html 加入监控1 2 3 4 5 6 7 8 9 10 11 var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ... plugins: [ new HtmlWebpackPlugin({ // html代码热加载 template: './index.html' }), ], ... };
自动打开浏览器 安装 open-browser-webpack-plugin1 npm install open-browser-webpack-plugin --save-dev
修改配置文件 webpack.config.js1 2 3 4 5 6 7 8 9 10 11 var OpenBrowserPlugin = require('open-browser-webpack-plugin'); module.exports = { ... plugins: [ new OpenBrowserPlugin({ //自动打开浏览器 url: 'http://localhost:9000' }) ], ... };
配置 json 加载器 安装 json-loader1 npm install json-loader --save-dev
修改配置文件 webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 module.exports = { ... module: { rules: [{ test: /\.json$/, use: [ { loader: "json-loader" }, ] }] } };
创建 config.json 文件，内容如下1 2 3 4 { "name" : "demo" , "type" : "HTML5" }
使用1 2 3 var config = require('../config.json') console.log(config.name);
配置 LESS 编译 安装 less style-loader css-loader less-loader1 npm install less style-loader css-loader less-loader --save-dev
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 module.exports = { ... module: { rules: [ { test: /\.less$/, use: [ { loader: "less-loader" }, { loader: "style-loader" }, { loader: "css-loader", options: { modules: true, } } ] }, } };
配置 Babel 编译 安装 babel-core babel-loader babel-preset-es20151 npm install babel-core babel-loader babel-preset-es2015 --save-dev
修改配置文件 webpack.config.js1 2 3 4 5 6 7 8 9 10 11 12 13 module.exports = { ... module: { rules: [{ test: /\.js$/, //babel解析器 exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015'] } }] } };
配置 React 安装 babel-core babel-loader babel-preset-es2015 babel-preset-react1 npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
修改配置文件 webpack.config.js1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 module.exports = { ... module: { rules: [ { test: /\.jsx?$/, loader: 'babel-loader', exclude: [ path.resolve(__dirname, "/node_modules/") ], query: { presets: ['es2015','react'] } } ] } };
配置 jQuery 解析器 安装 jquery1 npm install jquery --save-dev
修改配置文件 webpack.config.js1 2 3 4 5 6 7 8 9 10 module.exports = { ... plugins: [ new webpack.ProvidePlugin({ //jquery解析器 $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }) ] };
配置 js 代码压缩 修改配置文件 webpack.config.js, 在 plugin 中添加 webpack.optimize.UglifyJsPlugin 模块
1 2 3 4 5 6 7 8 9 10 11 12 13 var webpack = require('webpack'); var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin; module.exports = { ... plugins: [ new uglifyJsPlugin({ //js代码压缩 compress: { warnings: false } }) ] };
配置 eslint 语法解析 安装 esline 库1 npm install eslint eslint-loader eslint-friendly-formatter eslint-plugin-html babel-eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard --save-dev
在项目根目录下添加 eslint 配置文件 .eslintrc.js1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 // http://eslint.org/docs/user-guide/configuring module.exports = { root: true, parser: 'babel-eslint', parserOptions: { sourceType: 'module' }, env: { browser: true, }, // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends: 'standard', // required to lint *.vue files plugins: [ 'html' ], // add your custom rules here 'rules': { // allow paren-less arrow functions 'arrow-parens': 0, "indent": [2, 4],//缩进风格 'no-undef': 0, // allow async-await 'generator-star-spacing': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 } }
修改配置文件 webpack.config.jsurl-loader1 npm install url-loader --save-dev
修改配置文件 webpack.config.js1 2 3 4 5 6 7 8 9 10 11 12 13 module.exports = { ... module: { loaders: [{ test: /\.(png|jpg)$/, use: [ { loader: "url-loader" } ] }] } };
配置图片 1 2 3 4 5 6 7 module.exports = { ... module: { loaders: [ ] } };
配置 normalize.css 安装 normalize.css1 npm install normalize.css --save
使用
配置 iconfont
评论和共享
