1、在电脑新建一个文件夹Material_Design;
2、使用npm init初始化文件,此时文件夹生成package.json文件
3、打开网址 https://material.io/develop/web/docs/theming/ 找到 Documentation--Getting Started
4、按照官方文档第一步 执行 cnpm install webpack-dev-server --save-dev 安装 webpack-dev-server
5、在package.json添加代码
"scripts": { "start": "webpack-dev-server" },
上传后如图所示
6、使用npm install 依次安装 webpack@3 webpack-dev-server@2 css-loader sass-loader node-sass extract-loader file-loader
7、在新建Material_Design文件夹新建index.html,在src文件夹中新建index.scss文件
8、在Material_Design新建webpack.config.js文件,开始配置webpack
9、然后把官方文档中
module.exports = [{ entry: './app.scss', output: { // This is necessary for webpack to compile // But we never use style-bundle.js filename: 'style-bundle.js', }, module: { rules: [{ test: /\.scss$/, use: [ { loader: 'file-loader', options: { name: 'bundle.css', }, }, { loader: 'extract-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }, ] }] }, }];
各种报错。别人我不太清楚,我的工程是各种作,算了,这段不按照官网了。我自己来
10、自己配置插件以及webpack.config.js
package.json文件
{ "name": "materialdesign", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "node_modules/.bin/webpack-dev-server", "build": "node_modules/.bin/webpack -p" }, "devDependencies": { "antd": "^3.5.3", "css-loader": "0.28.8", "extract-text-webpack-plugin": "3.0.2", "file-loader": "1.1.6", "html-webpack-plugin": "2.30.1", "node-sass": "4.7.2", "sass-loader": "6.0.6", "style-loader": "0.19.1", "url-loader": "0.6.2", "webpack": "3.10.0", "webpack-dev-server": "2.9.7" }, "dependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-preset-env": "^1.6.1", "babel-preset-react": "6.24.1", "react": "16.2.0", "react-dom": "16.2.0", "react-router-dom": "4.2.2" }, "author": "", "license": "ISC" }
webpack.config.js文件
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
//入口文件
entry: './src/index.jsx',
output: {
path: path.resolve(__dirname, './dist'),
publicPath:'./',
filename: 'js/index.js'
},
resolve:{
alias : {
page:path.resolve(__dirname, './src/page'),
component:path.resolve(__dirname, './src/component'),
}
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env','react']
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback:"style-loader", // creates style nodes from JS strings
use:[
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
})
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name:'img/[name].[ext]'
}
}
]
},
{
test: /\.(ttf|svg|eot|woff|woff2|otf)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name:'text/[name].[ext]'
}
}
]
},
]
},
plugins: [
new HtmlWebpackPlugin({
template:'./index.html'
}),
new ExtractTextPlugin("css/[name].css"),
new webpack.optimize.CommonsChunkPlugin({
name:'common',
filename:'js/base.js'
})
],
devServer: {
host:'locahost',//修改为本机ip
port:8999,
historyApiFallback:{
index:'./index.html'
}
}
};
11、运行代码观察配置是否成功 npm run dev 成功即可进行下一步
12、未完待续。。。。。