使用 Webpack 导入 CSS 和 JS 文件
import CSS and JS files using Webpack
我有这样的目录结构:
和内部 node_modules:
>node_modules
>./bin
>webpack.config.js
>bootstrap
>bootstrap.css
>bootstrap.js
我需要像这样生成单独的 CSS 和 JS 包:
custom-styles.css, custom-js.js, style-libs.css, js-libs.js
其中 style-libs
和 js-libs
应该包含所有库的 syles 和 js 文件,如 bootstrap 和 jQuery。这是我到目前为止所做的:
webpack.config.js:
const path = require('path');
const basedir = path.join(__dirname, '../../client');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const stylesPath = path.join(__dirname, '../bootstrap/dist/css');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
watch: true,
// Script to bundle using webpack
entry: path.join(basedir, 'src', 'Client.js'),
// Output directory and bundled file
output: {
path: path.join(basedir, 'dist'),
filename: 'app.js'
},
// Configure module loaders (for JS ES6, JSX, etc.)
module: {
// Babel loader for JS(X) files, presets configured in .babelrc
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
babelrc: false,
query: {
presets: ["es2015", "stage-0", "react"],
cacheDirectory: true // TODO: only on development
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
]
},
// Set plugins (for index.html, optimizations, etc.)
plugins: [
// Generate index.html
new HtmlWebpackPlugin({
template: path.join(basedir, 'src', 'index.html'),
filename: 'index.html'
}),
new ExtractTextPlugin(stylesPath + "/bootstrap.css", {
allChunks: true,
})
]
};
Client.js
import * as p from 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
除了使用 webpack
.
加载外部 JS 和 CSS 文件外,我能够 运行 应用程序并正确呈现所有组件
我对 webpack 的经验不多,发现我很难理解它。有几个简单的问题:
1- 这个配置正确吗?如果是,那么如何使用 ES6 将我的 CSS 和 JS 文件包含在组件中。类似于 import
关键字。
2- 我是否应该为 CSS 文件使用 webpack?
3- 如何在 webpack 中指定单独的输入目录及其各自的输出文件?对于 custom1.js
和 custom2.js
?
应该输出类似 all-custom.js
的内容
我知道这些是一些非常基本的问题,我尝试了 Google 但没有找到针对初学者的简单 Webpack 教程。
- 您可以在项目的源文件中使用 es6 中的导入来包含 css 和 JS 文件。示例:
import './style.css';
import Style from './path/style.js';
注意。通常您需要在 webpack.config.js 文件中使用 es5 进行编码。如果你想使用 es6,只需遵循 link
您可以使用 https://github.com/webpack/css-loader 进行 CSS 配置。
您可以在 webpack 中使用代码拆分并指定多个入口点,但这会生成多个输出文件。查看以下 link 的多入口点部分。
https://webpack.github.io/docs/code-splitting.html
在多个项目中使用 Webpack 后,我弄清楚了 Webpack 是如何加载东西的。由于问题仍未得到解答,我决定自己为有相同需求的任何人做。
目录结构
->assets
->css
->my-style-1.css //custom styling file 1
->my-style-2.css //custom styling file 2
->src
->app
->app.js
->variables.js
->libs.js //require all js libraries here
->styles-custom.js //require all custom css files here
->styles-libs.js //require all style libraries here
->node_modules
->index.html
->package.json
->webpack.config.js
Bundle 1(应用的主要代码)
app.js
:假设这是主文件,应用程序从这里开始
var msgs = require('./variables');
//similarly import other js files you need in this bundle
//your application code here...
document.getElementById('heading').innerText = msgs.foo;
document.getElementById('sub-heading').innerText = msgs.bar;
捆绑包 2(js 模块)
libs.js
:此文件将需要所有需要的模块
require('bootstrap');
//similarly import other js libraries you need in this bundle
捆绑包 3(外部 css 文件)
styles-libs.js
:此文件将需要所有外部 css 文件
require('bootstrap/dist/css/bootstrap.css');
//similarly import other css libraries you need in this bundle
捆绑包 4(自定义 css 文件)
styles-custom.js
:此文件将需要所有自定义 css 文件
require('../assets/css/my-style-1.css');
require('../assets/css/my-style-2.css');
//similarly import other css files you need in this bundle
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const extractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
'app': './src/app/app.js', //specifying bundle with custom js files
'libs': './src/libs.js', //specifying bundle with js libraries
'styles-custom': './src/styles-custom.js', //specifying bundle with custom css files
'styles-libs': './src/styles-libs.js', //specifying bundle with css libraries
},
module: {
loaders: [
//used for loading css files
{
test: /\.css$/,
loader: extractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
},
//used for loading fonts and images
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
}
]
},
output: {
path: path.resolve(__dirname, 'dist'), //directory for output files
filename: '[name].js' //using [name] will create a bundle with same file name as source
},
plugins: [
new extractTextPlugin('[name].css'), //is used for generating css file bundles
//use this for adding jquery
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jQuery'
})
]
}
index.html
<head>
<link rel="stylesheet" href="dist/styles-libs.css" />
<link rel="stylesheet" href="dist/styles-custom.css" />
</head>
<body>
<h2 id="heading"></h2>
<h3>
<label id="sub-heading" class="label label-info"></label>
</h3>
<script src="dist/libs.js"></script>
<script src="dist/app.js"></script>
</body>
我有这样的目录结构:
和内部 node_modules:
>node_modules
>./bin
>webpack.config.js
>bootstrap
>bootstrap.css
>bootstrap.js
我需要像这样生成单独的 CSS 和 JS 包:
custom-styles.css, custom-js.js, style-libs.css, js-libs.js
其中 style-libs
和 js-libs
应该包含所有库的 syles 和 js 文件,如 bootstrap 和 jQuery。这是我到目前为止所做的:
webpack.config.js:
const path = require('path');
const basedir = path.join(__dirname, '../../client');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const stylesPath = path.join(__dirname, '../bootstrap/dist/css');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
watch: true,
// Script to bundle using webpack
entry: path.join(basedir, 'src', 'Client.js'),
// Output directory and bundled file
output: {
path: path.join(basedir, 'dist'),
filename: 'app.js'
},
// Configure module loaders (for JS ES6, JSX, etc.)
module: {
// Babel loader for JS(X) files, presets configured in .babelrc
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
babelrc: false,
query: {
presets: ["es2015", "stage-0", "react"],
cacheDirectory: true // TODO: only on development
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
]
},
// Set plugins (for index.html, optimizations, etc.)
plugins: [
// Generate index.html
new HtmlWebpackPlugin({
template: path.join(basedir, 'src', 'index.html'),
filename: 'index.html'
}),
new ExtractTextPlugin(stylesPath + "/bootstrap.css", {
allChunks: true,
})
]
};
Client.js
import * as p from 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
除了使用 webpack
.
我对 webpack 的经验不多,发现我很难理解它。有几个简单的问题:
1- 这个配置正确吗?如果是,那么如何使用 ES6 将我的 CSS 和 JS 文件包含在组件中。类似于 import
关键字。
2- 我是否应该为 CSS 文件使用 webpack?
3- 如何在 webpack 中指定单独的输入目录及其各自的输出文件?对于 custom1.js
和 custom2.js
?
all-custom.js
的内容
我知道这些是一些非常基本的问题,我尝试了 Google 但没有找到针对初学者的简单 Webpack 教程。
- 您可以在项目的源文件中使用 es6 中的导入来包含 css 和 JS 文件。示例:
import './style.css';
import Style from './path/style.js';
注意。通常您需要在 webpack.config.js 文件中使用 es5 进行编码。如果你想使用 es6,只需遵循 link
您可以使用 https://github.com/webpack/css-loader 进行 CSS 配置。
您可以在 webpack 中使用代码拆分并指定多个入口点,但这会生成多个输出文件。查看以下 link 的多入口点部分。 https://webpack.github.io/docs/code-splitting.html
在多个项目中使用 Webpack 后,我弄清楚了 Webpack 是如何加载东西的。由于问题仍未得到解答,我决定自己为有相同需求的任何人做。
目录结构
->assets
->css
->my-style-1.css //custom styling file 1
->my-style-2.css //custom styling file 2
->src
->app
->app.js
->variables.js
->libs.js //require all js libraries here
->styles-custom.js //require all custom css files here
->styles-libs.js //require all style libraries here
->node_modules
->index.html
->package.json
->webpack.config.js
Bundle 1(应用的主要代码)
app.js
:假设这是主文件,应用程序从这里开始
var msgs = require('./variables');
//similarly import other js files you need in this bundle
//your application code here...
document.getElementById('heading').innerText = msgs.foo;
document.getElementById('sub-heading').innerText = msgs.bar;
捆绑包 2(js 模块)
libs.js
:此文件将需要所有需要的模块
require('bootstrap');
//similarly import other js libraries you need in this bundle
捆绑包 3(外部 css 文件)
styles-libs.js
:此文件将需要所有外部 css 文件
require('bootstrap/dist/css/bootstrap.css');
//similarly import other css libraries you need in this bundle
捆绑包 4(自定义 css 文件)
styles-custom.js
:此文件将需要所有自定义 css 文件
require('../assets/css/my-style-1.css');
require('../assets/css/my-style-2.css');
//similarly import other css files you need in this bundle
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const extractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
'app': './src/app/app.js', //specifying bundle with custom js files
'libs': './src/libs.js', //specifying bundle with js libraries
'styles-custom': './src/styles-custom.js', //specifying bundle with custom css files
'styles-libs': './src/styles-libs.js', //specifying bundle with css libraries
},
module: {
loaders: [
//used for loading css files
{
test: /\.css$/,
loader: extractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
},
//used for loading fonts and images
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
}
]
},
output: {
path: path.resolve(__dirname, 'dist'), //directory for output files
filename: '[name].js' //using [name] will create a bundle with same file name as source
},
plugins: [
new extractTextPlugin('[name].css'), //is used for generating css file bundles
//use this for adding jquery
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jQuery'
})
]
}
index.html
<head>
<link rel="stylesheet" href="dist/styles-libs.css" />
<link rel="stylesheet" href="dist/styles-custom.css" />
</head>
<body>
<h2 id="heading"></h2>
<h3>
<label id="sub-heading" class="label label-info"></label>
</h3>
<script src="dist/libs.js"></script>
<script src="dist/app.js"></script>
</body>