note by roliauo
-------Webpack
cd /to/project
1. npm init
2. npm install webpack webpack-cli --save-dev
3. edit package.json
add one script in scripts block:
"build": "webpack"
4. add new folders : src, dist
(it's default name of webpack)
src (source code) --> webpack --> dist (client side will use it)
5. add index.js in /src/
6. npm run build (to generate main.js in /dist/)
7. add index.html in /dist/ (add this line after <body>: <script src="main.js"></script>)
now you can open the index.html
-------React
1. npm install --save react react-dom
2. edit index.html in /dist/ (add this line: <div id="root"></div>)
3. npm i --save-dev babel-core babel-loader@7.1.5 babel-preset-es2015 babel-preset-env babel-preset-react
(install babel to using jsx)
4. edit package.json
add babel block as below
"babel": {
"presets": [
"es2015",
"react"
],
"plugins": []
}
or add a file named ".babelrc"
{
"presets": [
"es2015",
"react",
],
"plugins": []
}
5. add webpack.config.js in /project/ (basic setting)
add json in module.rules as below:
{
test: /\.js$/,
use: ['babel-loader']
}
-------
**webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
module: {
rules:[
{
test: /\.js$/,
use: ['babel-loader']
}
]
}
};
留言列表
